Forum Moderators: not2easy
I have been pulling my hair out looking for solutions on forums and on the internet for this, I have a few floating divs next to each other, and on the main div where all the text is, the content is different sizes on each page there fore making the div bigger, in ie it pushes the footer to the bottom no matter what!
In fire fox it displays the footer under the set height no matter what, I have tried clearing etc.. nothing seems to work and I cannot use set height in FF because the content then goes off the div!?!
Hope some one can help!
HTML
<div class="wrapper">
<div class="left_wrapper">
<div class="news_block">
<div class="news_info">
news here
</div>
</div>
<div class="int_block">
STUFF HERE
</div>
</div>
<div class="page_wrapper">
<div class="body_block" id="body_block">
<div class="body_text">
lots of text
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer">
footer
</div>
</div>
CSS
/*Left Block*/
.left_wrapper{width:161px; height:536px; text-align:center; float:left;}/*NEWS*/
.news_block{width:161; height:375; margin-top:14px; background-color: #FFFFFF; border: 1px #adadad solid; font-family: Verdana;}
/*INTERACTIVE*/
.int_block{width:161px; height:147px; margin-top:14px; background-color: #FFFFFF; border: 1px #adadad solid;}
/*MAIN PAGE*/
.page_wrapper{float:left; width:545px; height:575px;}
.body_block{margin-left:14px; min-height:538px; width:545px; margin-top:14px; border: 1px #adadad solid; background-color: #FFFFFF; background-image: url(../../images/wm_bg.gif);}
.body_text {font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-left:9px; margin-right:9px; margin-top: 7px; margin-bottom: 5px; text-align:justify;}
.footer{position: relative; margin-top:14px; width:720; height:42; background-image: url(../../images/footer.gif); font-size:10px; clear: both;}
I think what you're saying is you want to set the height in stone but at the same time not set it in stone so it is flexible and the divs can move around?
Firefox is correctly obeying your specific height rule and displaying at the bottom of your set height.
If the page_wrapper height is always different you shouldn't be trying to force the height. If you remove the height from the page wrapper the footer will always be just below the content.
