.clearfix

HTML & CSS
1

Hello,

Here’s my page: martcol.co.uk/brightontherapyservice/2011/08/22/another-filler-post/

At the bottom of the post there’s some meta information that I can’t seem to clear. I’m using a WP theme that has .clearfix as an option but even though I have managed to put that in the <footer> element, it still won’t clear.

I would appreciate a bit of help.

Thanks

martin

2

Are you talking about this, “<p>Rendered template: single.php</p>”? If so, look to the tpl file.

cheers,

gary

3

Hello Gary,

Thanks for your interest. This is the element I mean:

It’s on this page.

I have put the .clearfix on it which is in the stylesheet for the theme and that doesn’t fix it. However, I have also been able to add style=“clear:both;” to the footer element in Firebug and that seemed to do the trick.

martin

4

If you actually want to use the clearfix class, it should be added to the entry-content div in your case, not to the footer element.

5

Many thanks CletusSpuckler,

I have done that and it works. I am very grateful.

If you have the chance to tell me why I was wrong to put it on the footer element I would appreciate that. But regardless, I am thankful for your help.

Martin

6

No problem.

There are lots of articles on the web on how float works, but I’m not sure where it’s best to start reading :slight_smile: Maybe Paul has written about it somewhere?

Let’s say you have something like this:


<div class="container">
	<div id="floated-column-1">
		<p>some content</p>
	</div>

	<div id="floated-column-2">
		<p>more content</p>
		<p>and some more</p>
	</div>
</div>
<p>some content after the container</p>

Float the two divs inside the container, then add a border to the container and watch what happens… The container will not wrap around the floated elements. The floats are removed from the document flow, and the container will collapse and have no height.

When you want to make sure the container contains all of its floated child elements, you could add the clearfix class to the container. There are a number of other ways to make sure it contains its children as well; the simplest is probably to add overflow: hidden; to the container.