Question

My HTML is as follows:

<div id="list-container"> </div>
<div id="button-container"> </div>

And the CSS for these two divs:

#button-container {
    float: right;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    float: left;
    height: 100%;
    background-color: #FAD275;
}

Both of these divs are side-by-side and have the same height. The button-container div is on the right and must have a fixed width of 100px. The left div, however, named list-container needs to have a width equal to the remaining space allocated by the parent container. So for example, if my parent div has a width of 400px, and the button-container div takes up 100px of that, then I should be able to specify something like height: 100% for the list-container div and have that equal to a width of 300px.

The absolute #1 rule is that I cannot set a fixed width for the list-container div. The parent div for this whole thing is dynamically resizable, so every child underneath it must be designed to resize with it, hence why this question exists.

Keep in mind that this is all being done in a Google Chrome extension, so I have access to HTML5 and CSS3. I also don’t need to worry about cross-browser support. I only want this to work in Chrome.

Can anyone help me figure out how to make list-container fill the remaining space of the parent container without using a fixed width?

Answer 1

You can use the CSS property display: table; and display: table-cell;.

This mimics the way a table handles its rows, but applies it to divs.

You’ll need a wrapper div, but that’s all the extra markup you’ll need.

HTML

<div class="wrap">
<div id="list-container">list container </div>
<div id="button-container">button container </div>
</div>

CSS:

.wrap
{
    display: table;
    width: 100%;
    height: 100%;
}

#button-container {
    display: table-cell;
    width: 100px;
    height: 100%;
    background-color: #f5f5f5;
}

#list-container {
    display: table-cell;
    height: 100%;
    background-color: #FAD275;
}

See my example here.