Hello All,

I am pretty new to CSS and this is one of my first attempts so bear with me.

On the page below, the image on the right and footer are touching. I have tried adding a "margin-bottom" to the main content area and also a "margin-top" to the footer wrap but neither seem to work. Generally I want to put a space of roughly 15px between both.

This issue arises on Firefox, Safari & Chrome. Seems to work fine in IE.

http://www.kmsjoinery.com/wip/lamella.php

Any help would be greatly appreciated.

looking at your page in Chrome's developer tools, you can see the images are popping out of the content div.

You could try adding the margin to your clearboth div. Or wrap the images in a div and put a margin at the bottom of those. The images are floated so they're not expanding their container div to size.

Looks good in Opera tho!

Add overflow:auto; to your #content div and you will properly clear the floated elements within it. Once you clear the floats,the 15px of bottom padding will work. You don't need the non-semantic extra div just to clear floats.

Thank you both for your reply.

You were correct regarding the overflow. I tried this and it worked a charm.

You mentioned "You don't need the non-semantic extra div just to clear floats". Does this mean I do not need the "clearboth"?

Thanks again. Much appreciated.

You mentioned "You don't need the non-semantic extra div just to clear floats". Does this mean I do not need the "clearboth"?

That is correct. You could also just add clear:both to the next element, like #footerwrap, and that would also eliminate the need for the extra div.