Question

I’m trying to solve a problem where a page is meant to have a fixed-width left-hand nav, and a main div to its right, taking up the rest of the width of the screen.

The main div on the right is meant to contain a table, and I want the table to expand to fit the width of the entire width of the main area.

Is there a way to do this in CSS?

I have code similar to this:

<div id="overallDiv">

<div id="lhn">
Left-hand nav
</div>
<div id="mainBody">
    <table>
        <tr><td>A1</td><td>A2</td><td>A3</td></tr>
        <tr><td>B1</td><td>B2</td><td>B3</td></tr>
        <tr><td>C1</td><td>C2</td><td>C3</td></tr>
        <tr><td>D1</td><td>D2</td><td>D3</td></tr>
    </table>
</div>

</div>

My CSS is similar to this:

#lhn
{
    display:inline;
    float:left;
    width: 100px;
}
#mainBody
{
    display:inline;
    float:left;
}

How can I make the table fill the remaining part of the page?

Answer 1

The easiest and least “hackish” way of doing this at this at this time is to deploy display: table and display: table-cell:

​#overallDiv {
    display: table;
    width: 100%;
}
#lhn,
#mainBody {
    display: table-cell;
}
#lhn {
    width: 200px;
    background: #ddd;
}
​#mainBody > table {
    width: 100%;
}​

http://jsfiddle.net/wxnBQ/

Using float for non-text layout is a long-in-the-tooth “borrowing” of it’s effect; the sooner is crawls into the grave of “useful ideas back in those days”, the better we’ll all be.

The “best” approach for this would, of course, be to do a Flexbox implementation (W3C proposed specification). That day’s not here yet.