How to Achieve Fluid Width and Even Spacing for Four DIVs in a Container?

Fluid Width with Equally Spaced DIVs

Question:

You have a fluid width container DIV with four DIVs, each with fixed dimensions. How can you float box 1 to the left, box 4 to the right, and space boxes 2 and 3 evenly between them, maintaining fluid spacing as the browser window size changes?

**Answer:

Refer to the provided JSFiddle for a complete example: http://jsfiddle.net/thirtydot/EDp8R/

Explanation:

This solution utilizes several techniques to achieve the desired layout:

• text-align: justify;: This aligns the DIVs horizontally, distributing space between them.
• .stretch: A span with width set to 100%. It expands to fill the remaining width of the container.
• display:inline-block; *display:inline; zoom:1;: Ensures inline-block behavior for IE6/7.
• font-size: 0; line-height: 0;: Prevents vertical space caused by inline-block in IE6.

By combining these techniques, the DIVs are positioned fluidly, evenly spaced and floating as desired, regardless of the container width.

The above is the detailed content of How to Achieve Fluid Width and Even Spacing for Four DIVs in a Container?. For more information, please follow other related articles on the PHP Chinese website!