How to Create a Fluid Width Container with Equally Spaced DIVs?

Fluid Width with Equally Spaced DIVs

The challenge is to create a fluid width container with four equally spaced DIVs. The DIVs should be horizontally aligned, with DIV 1 floating left, DIV 4 floating right, and DIVs 2 and 3 positioned in between. Additionally, the spacing should adjust dynamically as the browser is resized.

Solution

To achieve this, we can utilize the CSS properties text-align: justify and display: inline-block. Here's the code:

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

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

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

.box1,
.box3 {
  background: #ccc
}

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

Explanation

• The #container element is set to text-align: justify. This forces the text to expand to fill the container width.
• Each .box element is set to display: inline-block. This allows them to behave like inline elements, but with a fixed width and height.
• The .stretch element acts as a spacer between the .box elements. It is set to width: 100%;, which stretches it to fill the remaining space.
• font-size: 0; and line-height: 0 fix an issue in IE6.

As the browser is resized, the .stretch element adjusts its width to maintain the spacing between the .box elements, resulting in a fluid layout.

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