Question

I’m having a problem with this page.

The .blog-footer div needs to clear on the right to correct for the height of the pictures introducing clear:right; causes the huge gap to appear on the page in FF and IE.

I’m at a loss, I’ve tried numerous ideas to get around the problem and at this point I’ve been staring at it too long to see the problem clearly. Can anyone help me out.

Thanks in advance.

Answer 1

Try using positioning. Add these to get you started:

#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}

There are some subtleties, like getting the right behaviour when the content as a whole is not long enough to push the footer down, but I find those easier to work out than floating problems. With a fixed height footer like yours, that is easy to fix using a bottom margin on the page body and some more absolute positioning for the footer. You have gobs and gobs of extra divs to play with.