SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for an alternative way to clear floats

    Buongiorno from medieval York UK :-)

    Ok on this site http://tutorial.davidclick.com/max-2-column.html the footer clears the floated columns with a clear:both; e.g.

    #footer
    {
    clear: both;
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
    }

    Having read a tutorial (which has confused me) they suggest there is another technique i can make the footer clear the floated columns by using overflow hidden e.g:

    {
    float: left;
    width: 900px;
    overflow:hidden;

    }

    But alas when i try this the layout breaks :-( So my question is please: "What bit css would i need to add to the #content-container to clear the floated columns & push the footer in place if i did not want to add clear:both; in the footer?"

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I'm on a mobile now, so can't say why the page breaks, but it shouldn't. Overflow: hidden should work fine, but the common alternative is the "clearfix" method.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Here's a link that detail options, including clearfix. http://pageaffairs.com/notebook/containing-floats
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are mixing a few concepts there and I half answered this in your other thread Containing floats and clearing floats are separate issues. You contain floats so that the parent will encompass the floats and you clear elements so that they clear the floated content.

    First of all in your current structure you just need to add clear:both to the footer to effect the clearing.

    Code:
    #footer{clear:both}
    No other fixes or css/html code are needed.

    The footer will act as the clearing div itself - it does not need the height :1% and indeed that is dangerous to apply to real element as you may find the content limited to 1% in some cases. (As an aside the height:1% was a common hack to force layout in IE but is much safer to use zoom:1.0 instead even though it is invalid. Its no needed anyway because the element has a width which will already force haslayout).

    Don't float the footer either as it is not needed to float.

    If your code structure did not contain a footer or if the footer was outside #content-container then in order to make #content-container enclose the two floated columns you would use a containing technique such as the clearfix method or indeed just adding overflow:hidden to #content-container (assuming you don't need visible overflow). Overflow other than visible will contain child floats because it creates a new block formatting context and in that context will automatically take care of its child floats (the same as inline-block, display table, floats and absolutely positioned elements will as they all form new block formatting contexts).

    Or using the old fashioned clearfix method you would do this:

    Code:
    #content-container:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }
    #content-container{zoom:1.0}
    This basically puts some generated content after the content in that container and then clears it - just like your footer is already doing.

    Or you may want to look at the revised clearfix method.

    However your current structure needs neither as you can simply add clear:both to the footer.

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Big thank you guys :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    here is all you need for ie8+

    .contain:after {
    content:'';
    display:block;
    clear:both;
    }


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
  •