How Can I Make a DIV Fill the Remaining Width of its Container After Other DIVs are Positioned?

Filling the Remaining Width with a DIV

It's often necessary to apportion the remaining width of a container div to another div. In the given example, the goal is to have "div2" fill the width remaining after "div1" and "div3" have taken up their allotted space.

To achieve this, employ the following CSS:

#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }

Explanation:

• "divs" naturally occupy 100% of their container's width unless explicitly defined otherwise.
• "div1" and "div3" are given fixed widths and "float: left" and "float: right," respectively, to align them on either side.
• "div2" is positioned after "div3" in the HTML.
• "div2" receives left and right margins equivalent to the widths of "div1" and "div3." This forces its contents to occupy the remaining space within its container.

The above is the detailed content of How Can I Make a DIV Fill the Remaining Width of its Container After Other DIVs are Positioned?. For more information, please follow other related articles on the PHP Chinese website!