How to Split a Div into Two Portions with One Div Taking Up the Remaining Space?

How to Achieve a Perfect Horizontal Split with Divs in XHTML/CSS

You have nested divs inside an outer div with 100% width, and you want to split the width of the nested divs into two portions, with one div taking up the remaining space after the other. The catch is that you don't want to specify the width of the first div, as its size depends on its contents.

The Magic of Hidden Overflow

The solution lies in using overflow: hidden;. This CSS property prevents elements adjacent to floated elements from extending beyond the float's bounds.

HTML Structure

Adjust your HTML as follows, replacing the # characters with suitable IDs:

<div>

CSS Styles

Implement the following CSS:

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

IE 6 Support

Optional CSS for IE 6 support (if required):

<!--[if lte IE 6]>
    <style type="text/css">
        #inner2 {
            zoom: 1;
        }

        #inner1 {
            margin-right: -3px;
        }
    </style>
<![endif]-->

Result

With these changes, #inner2 will occupy the remaining horizontal space, ensuring a neat and dynamic split of the available width between the nested divs.

The above is the detailed content of How to Split a Div into Two Portions with One Div Taking Up the Remaining Space?. For more information, please follow other related articles on the PHP Chinese website!