The problem with the concept: right;
I have a problem with this page http://www.gwynfryncottages.com/news.php
div.blog-footer needs to be cleared on the right to correct the height of images that represent legibility: on the right; causing a huge rip that appears on the page in FF and IE.
I am at a loss, I have tried many ideas to get around the problem, and at this point I have looked at it for too long to see the problem clearly. Can anyone help me.
Thanks in advance.
a source to share
Try using positioning. Add them to get started:
#page-body {position: relative; width: 740px; margin-left: 20px;}
#sidebar {position: absolute; right:-190px;}
There are a few subtleties like getting the right behavior when the content is generally not long enough to nudge the footer, but I find they work easier than floating issues. With a fixed height footer like yours, which is easy to fix using a footer on the body of the page and some more absolute positioning for the footer. You have cubes and cubes of additional divas to play with.
a source to share
The attribute clear
works relative to floating elements. So you can use it to make sure the footer is covering the div below the image, but the fact that your sidebar is floating and also actually pushes things towards the bottom of the sidebar.
So, as @Nicholas Wilson suggests, one solution is to position your sidebar using other means than float. And your layout doesn't really seem to require floats for the sidebar.
In the other direction I noticed that you are currently hard-coding the heights of your images. Since you know these heights, another possibility is to forget about clear:right
for the blog footer and add an attribute min-height
for the body of the object, like in (this is for a beer festival)
<div class="asset-body" style="min-height:184px;">
Certainly not dainty or dry, but if you did, you could do it or do javascript.
a source to share