How Can I Make a Div Occupy the Remaining Width of Its Parent Container?

Mastering Div Alignment: Making a Div Occupy the Remaining Width

Your task is to make a div, named "div2," occupy the remaining space within a parent container div, "Main." Here's the HTML snippet provided for this scenario:

<div>

To achieve your goal, employ the following CSS code:

#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 inherently occupy the entire width of their parent containers.
• By assigning left and right margins to "div2" equal to the widths of "div1" and "div3," its content is effectively constrained within those margins.
• The sequence of HTML elements is crucial: "div2" must appear after "div3" to ensure proper alignment.

The above is the detailed content of How Can I Make a Div Occupy the Remaining Width of Its Parent Container?. For more information, please follow other related articles on the PHP Chinese website!