100% Content & Footer

[Andrew R]

Hi there

 

The best way I can explain this is with a diagram.  What I'm trying to do is get the footer to stick to the bottom (using sticky footer) but also get the content area to expand depending on the screen size. 

 

This would normally be easy enough to do but I have a rounded top on the content area.

 

 

 

<div id="wrap">
<div id="rounded-top"></div>
<div id="rounded-content">
<div id="main" class="clearfix">
</div>
</div>
</div>

<div id="footer">
<div id=”footer-top”>
</div>
<div>

 

When I use sticky footer the following is displayed.  What I want is the content area to expand. 

 

 

I would appreciate any advice or tips.

 

Thanks a million

 

[Hybride]

(Someone can correct me if am wrong), but I usually put in a clear:both in a tag and put it above the footer.

<div style="clear:both"> </div>
<div id="footer">...</div>

That usually does it for me. If not, you may have to move in your footer one </div> tag above.

[haku]

http://www.cssstickyfooter.com/

 

This is the best sticky footer code I have found. Works really well.