Ok, how do I get the Middle div to expand to it's entirety?? I've been wrestling with this issue for hours now. Please can anyone help me?? I'm not going to use tables, I know this has to be possible.
Thanks.
Ok, how do I get the Middle div to expand to it's entirety?? I've been wrestling with this issue for hours now. Please can anyone help me?? I'm not going to use tables, I know this has to be possible.
Thanks.
A lot has been written on the Simple, Ideal, Intuitive Three-Column Layout. This one is pretty good, and I've found it to be relatively easily modifiable, the two times I've used it: http://matthewjamestaylor.com/blog/perfect-3-column.htm
Set a left and right margin equal to the left and right floated div + thos 5px gap you need in between.
That would be:
margin:0 205px;
and do not float the mid div. Place the right floated div in front of left floated, and the mid div as last in html (eliminates IE6 bug).
That ought to work:
width: 100%;
margin-left: 205px;
margin-right: 205px;
You also won't need floating on that div, then.
Not sure why you're floating the top div. Assuming:
<div id="container">
<div id="header">...</div>
<div id="content">
<div id="left">...</div>
<div id="main">...</div>
<div id="right">...</div>
</div>
</div>
ten:
#container { margin: 0 auto; /* fixed or floating width */ }
#header { margin: 5px; }
#container { overflow: auto; margin: 5px; }
#left { float: left; width: 200px; }
#right { float: right; width: 200px; }
#content { margin: 0 205px; }