SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: .clearfix

  1. #1
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .clearfix

    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. #2
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you talking about this, "<p>Rendered template: single.php</p>"? If so, look to the tpl file.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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. #5
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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 Maybe Paul has written about it somewhere?

    Let's say you have something like this:
    HTML Code:
    <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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •