views:

59

answers:

5

Having problem with the middle Div not expanding to the width

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: 

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

Lord Torgamus
+1  A: 

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

easwee
Awesome, thank you, this works perfect :)
SoLoGHoST
A: 

this could help

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

mare
A: 

That ought to work:

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

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

ANeves
No, this doesn't work.
SoLoGHoST
With the middle div coming last in the html? It ought to. It seems to be the same thing as the one you accepted the answer... well, doesn't matter as long as the problem is solved. :)
ANeves
Oh, you didn't say anything about the middle div coming in last in the html. But hey cheers anyways :)
SoLoGHoST
My bad, I ought to not have assumed anything and just have been more explicit. :)
ANeves
A: 

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