View Full Version : CSS DIV Footer Positioning - Help

Jan 24th, 2007, 05:57 PM
I am designing a page (I'm relatively new to css, so sorry if this is an obvious question).

I'm not sure if I did the div positioning/coding the correct way, but basically I have this site: http://www.piratebay.us/hoodia/hoodiatemplate.html

Looks fine as it is, but when I add more content I can't get the footer (just an image of the lower rounded corners and lower border) to expand given more content on the main page.

How do I get this footer to move in relation to content on the page?

As it is right now if I add more content it overlaps onto the footer and just keeps streaming down.

Any help would be greatly appreciated. The CSS of the page can be found here: http://www.piratebay.us/hoodia/hoodiastyle.css

Thanks a lot for any help.

Jan 24th, 2007, 06:14 PM
Watch out using absolute positioning for your building blocks. Because if these have unknown height it will be hard to get content flowing beneath.

You have two columns below your horizontal navigation bar. For this I would recommend using floats. Using your names, take a look at this approach:

.leftbar {
float: left;
width: 131px;
.mainimage {
float: left;
width: 601px;
.footer {
clear: both;

Instead of using class="footer" together with .footer, it is probably more natural to use id="footer" together with #footer since you for sure only will have one footer element. The same holds for your other main building blocks.

Jan 24th, 2007, 06:18 PM
Thanks a lot!

I will try it out as soon as I can.