Question

I’m having an issue where I have a min-height set up in a div above the footer. In order to get the text in the footer to align center, I am using clear:both in the CSS. The only issue is that now there is a large space between the content and the footer?

Here’s the site I’m working on:
http://brimbar.com/no_crawl/RiverHollow/about.html

Thanks!

Answer 1

It’s because you have that floated image with the giant margin-bottom. clear: both means “no elements should be on either side of this element”, so the footer has to be below that 600px margin.

The reason that the footer text isn’t centered without clear: both is because it’s only centering within the width between the start of the div and the left side of that image (plus its giant margin).

What you should do is change the markup so that your image appears in another column div inside the content div, since you seem to want to display it in its own column rather than floated. If you do this, you won’t need the giant margin, nor will you need clear: both on your footer elements.

Here’s a demo: http://jsbin.com/uxiqer/1/edit

Note you can use floats or position: absolute to position the .images div on right; I just find position: absolute easier to work with.

If you don’t need images to display in their own column then you can simply keep the float on the image and remove that margin-bottom, then the text will wrap nicely around the image and its margin. This is the intended purpose of float. Then without the giant margin overflowing the content div, the footer text can be centered properly without any need for clear: both.