Middle Div not fully expanded in the row, pic included

Having problem with the middle Div not expanding to the width http://acs.graphicsmayhem.com/images/middiv.jpg

Ok, how do I get the Middle div to expand to it's entirety?? I've been wrestling with this issue for hours now. 开发者_如何学Python Please can anyone help me?? I'm not going to use tables, I know this has to be possible.

Thanks.

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

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

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