Three part dynamic spacing wo/Table and Absolute Positioning

Question

I'm trying to place 3 divs within a larger div such that the center one is 800px wide, and centered, and the other two fill the space remaining. I cannot use tables, nor can I use absolute positioning, as I have html below that must be outside the three divs but inside the larger div. I can get the center div:

.center-div {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

But how do I position the other two divs?

<div id="outer">
    <div id="left-div"></div>
    <div id="center-div"></div>
    <div id="right-div"></div>
</div>

Answer 1

You could try messing around with display: table-row; for the container div and display: table-cell; for the inner divs. You might even need a second container with display: table;—the basic idea is emulating a table without using table, tr, and td.

All those table-values for the display property are specified in CSS 2.1, but I have never personally tested which browsers support them. I’ll bet my money though that IE6 won’t be able to cope with it. ;-)