Create two side lateral heights

Question

So, I set off from web pages dedicated to table design and thought I'd give div and CSS a try, so I hope you can help me.

Situation:

I currently have the following div structure:

<div id="header"> <div id="headline"> </div> <div id="login"> </div> </div> <div style="clear: both;" /> <div id="mainbody" style="border-top: black solid 2px;"> <div id="menu"> </div> <div id="bodyContent"> </div> </div> <div style="clear: both;"></div> <div id="footer"></div> 

And I have the following CSS encoding:

 #mainbody { background-color: white; width: 1000px; margin-left: auto; margin-right: auto; } #menu { width: 137px; float: left; background-color: #EEEEEE; padding-left: 3px; } #bodyContent { float: right; width: 850px; background-color: white; padding: 5px; } #headline { width: 693px; height: 75px; float: left; background-color: white; font-family: monospace; font-size: 48pt; font-weight: bold; padding-left: 7px; } #login { height: 75px; width: 300px; float: right; background-color: white; } #header { background-color: white; width: 1000px; margin-left: auto; margin-right: auto; } #footer { border-top: black solid medium; width: 1000px; background-color: white; margin-left: auto; margin-right: auto; height: 50px; } 

Problem:

The "menu" and "bodyContent" sections have different heights on my pages. Therefore, if I have a rather large "bodyContent" page, the "menu" div will not completely go back to the "footer" section. The same problem exists if the div "menu" is higher than the div "bodyContent".

I would like the divs "menu" and "bodyContent" to have the same height / go down to the footer.

I tried to look for a solution, but still have not received any result that I expected. I hope you guys can help me with this.

thanks

Answer 1

try the following:

HTML

 <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2</div> <div id="col3">Column 3</div> </div> </div> </div>​ Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2</div> <div id="col3">Column 3</div> </div> </div> </div>​ 

CSS

 #container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden; }​ 

Example: http://jsfiddle.net/VdfJh/

and check this link:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

Depending on the browsers you need to support, you may try different approaches.

A very new and nice solution is the new flexbox layout ( spec ), which has very good support at the moment and is designed for such layout structures: Example .

Another clean display:table solution, which makes your divs behave like tables with all their advantages, such as columns with the same height and without the disadvantages of non-semantic cluttering tags and inflexible structure. To do this, try the following:

 parent{ display:table; } .children{ display:table-cell; } 

See script example

Answer 3

You can find a solution to this in the accepted answer to this question.

How to force a child div to a 100% div parent without specifying the height of the parent?

Answer 4

I would try to remove the floats from the menu and bodycontent, set both to display: inline block; and set the menu height to # 100%

Not tested, may not work