Three part dynamic spacing wo/Table and Absolute Positioning
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 posi开发者_StackOverflowtioning, 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>
You could try messing around with display: table-row;
for the container div
and display: table-cell;
for the inner div
s. 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. ;-)
精彩评论