How to Create Fluid Width Containers with Equally Spaced DIVs?

Fluid Width Containers with Equally Spaced DIVs

You have a container DIV with a fluid width, and you want to place four DIVs within this container. Each DIV should be 300px x 250px in size. You want Box 1 to float left, Box 4 to float right, and Boxes 2 and 3 to be spaced evenly between Boxes 1 and 4. Additionally, you want the spacing to be fluid, adjusting to the size of the browser window.

Solution:

To achieve this, use the following code:

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

<div>

This solution utilizes the following techniques:

• text-align: justify: Distributes the boxes evenly within the container.
• .stretch: An invisible element that fills the remaining space, ensuring even spacing.
• display:inline-block: Enables the boxes to be positioned inline and spaced using the justify alignment.
• font-size: 0; line-height: 0: Fixes an issue with IE6.

The above is the detailed content of How to Create Fluid Width Containers with Equally Spaced DIVs?. For more information, please follow other related articles on the PHP Chinese website!