Grow your CSS skills. Land your dream job.

[Solved] Floats

  • # June 18, 2008 at 8:33 pm

    Alright…

    So I have a div (content-wrap) that is holding two columns.

    As soon as I apply a float to any of the objects inside of the div, the height:auto; for content-wrap no longer works.

    Code:
    div#content-wrap{
    width:872px; height:auto;
    margin:0 auto;
    background-color:#231a1c;
    padding:20px 14px 20px 14px;
    }
    div#LsideBoxes{
    height:265px; width:326px;
    float:left;
    }
    div#main-content {
    width:518px; height:auto;
    float:right;
    background-color:#eeeeee;
    }

    any thoughts?

    pab
    # June 18, 2008 at 9:08 pm

    you have to clear your floats

    try these two techniques

    div#content-wrap:after
    {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
    }

    or you can add a <br class="clear"/> right after your div#content-wrap

    and in the css

    .clear {clear:both;}

    hope it helps

    pab

    # June 18, 2008 at 11:05 pm

    seems to have worked.

    thank you thank you…

    pab
    # June 18, 2008 at 11:20 pm

    glad it helped.

    which one did you end up using?

    pab

    # June 19, 2008 at 12:19 pm

    I used the first one.

    div#content-wrap:after
    {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
    }

    # September 11, 2009 at 5:41 am

    http://css-tricks.com/all-about-floats/

    is brlliant and explains all you need to know about floats, understanding them is so important, so that you can fix problems, I found this really useful. Chris also did a really cool video on this subject it’s about 15mins long but well worth watching

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".