100 % height not working on all of the divs

Question

I'm trying to get the 100 % height work but at some point the text flows over the divs. (Site url: http://uusilegenda.net/)

Here is the wrapper css:

#wrapper { box-shadow: 0px 0px 20px #666; background-color: #ddd; margin:0 auto; width: 1000px; border-left: 2px solid #666; border-right: 2px solid #666; height:auto !important; height:100%; min-height:100%; position:relative;

And here is the css of the menu bar:

#content2 { float: left; left:0; width: 200px; position: absolute; height: 100%; bottom: 0; background-color: rgba(255,255,255,0.05); border-right: 1px solid #666;

If I add

 clear: both; 
 overflow:hidden;

to the wrapper div and remove

position: absolute;

from the content div it almost looks like right but then the menu bar isn't full height.

And before you say that the css is poor, don't blame me, it is my friend's layout/css. :)

Answer 1

Agree with the 1st answer about your css/layout needing to be re-written in a better way, but a quick fix would be this:

Add the following css to the existing style rules:

#wrapper { clear: both; overflow:hidden; }

#content1main { width: 760px; }

Remove the following css on the existing style rule:

#content2 { position: absolute }

These will fix your layout issues.

Answer 2

Remove position:absolute from #content2

and changed the width of #content1main

but ultimately you should rethink your whole css as your's is quite bad.