hi i have template with one wrap div which contains two important divs , sidebar and main . i decide to set main div height to 100% so always covers the whole page height. i set body height to 100%. main height to 100%. and wrap height 100%. but now wrap is always shorter than main div or should i say child divs getting out of wrap div. and its different in ie and ff . whats the problem ? this is my code . i just want my main div to be 100% . i dont care about wrap div it could be with specific height . http://www.speedyshare.com/files/21269014/code.txt
A:
try adding <div style="clear:both"></div>
so your html will look like this
<body class="twoColFixRtHdr">
<div id="wrap">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
</div>
<div id="main">
<h1> Main Content </h1>
</div>
<div style="clear:both"></div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Let me know if that works!
Louie
2010-03-05 15:35:44
thank but footer already has clear:both and it doesn't work .
lyoto
2010-03-05 15:44:18
A:
I notice that you have set the height of the sidebar to 500px. Is there a particular reason for that?
Greg Hluska
2010-03-05 17:38:16
As well, you may wish to reconsider the logic behind setting #main {height: 100%;}
Greg Hluska
2010-03-05 17:40:54
no reason ! the whole point is to make main 100% . as i said i don't care about wrap height . it's not very important . just my #wrap background is gray and my #main bg is white so its nice if the white color be all the way down of the page . i don't like half gray half white page .
lyoto
2010-03-05 19:41:59