Middle Div not fully expanded in the row, pic included.

Question

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.

Answer 1

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

Answer 2

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).

Answer 3

this could help

http://www.maxdesign.com.au/articles/css-layouts/

Answer 4

That ought to work:

width: 100%;
margin-left: 205px;
margin-right: 205px;

You also won't need floating on that div, then.

Answer 5

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; }