How to make an inner div fill the remaining horizontal space after another inner div's width is set dynamically?

Setting the Width of Inner Divs

When working with nested divs and flexible content, determining the appropriate width for each div can be challenging. This question explores a technique to set the width of an inner div to the remaining horizontal space after accounting for the width of another inner div.

HTML Structure:

The HTML structure consists of an outer div and two nested inner divs:

<div>

Problem Statement:

The goal is to make the #inner2 div fill the remaining horizontal space after the #inner1 div's width has been determined dynamically based on its content.

Mystery Ingredient: Overflow: Hidden

The key to achieving this layout is the use of the CSS property overflow: hidden; on the outer div (#outer). This instructs the browser to constrain its floated children within its own boundaries.

Revised HTML:

To apply the CSS effectively, the div ids should follow valid CSS syntax:

<div>

CSS Solution:

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

Browser Compatibility and Edge Cases:

This solution has been tested and confirmed to work correctly in IE 6, 7, and 8; Firefox 3.5; and Chrome 4. In IE 6, an additional CSS rule using zoom: 1; is necessary to ensure the #inner2 div fills the remaining space.

The above is the detailed content of How to make an inner div fill the remaining horizontal space after another inner div's width is set dynamically?. For more information, please follow other related articles on the PHP Chinese website!