problem with clear: right;

Question

Hi Everyone, I'm having a problem with this page http://www.gwynfryncottages.com/news.php

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.

Answer 2

The clear attribute works relative to floating elements. So you can use it to make sure the footer closes the div below the picture, but the fact that your sidebar is floating as well actually pushes things down to the bottom of the sidebar.

So, as @Nicholas Wilson proposes, one solution is to position your sidebar using means other than float. And your layout doesn't appear to really require float for the sidebar.

In another direction, I noticed that you are currently hardcoding the heights of your pictures. Since you know these heights, another possibility is to forget about the clear:right for blog-footer , and add a min-height attribute to the asset-body, as in (this is for the beer festival)

<div class="asset-body" style="min-height:184px;">

Certainly not elegant or DRY, but if you had to you could do this or have javascript do it.