Grow your CSS skills. Land your dream job.

When you float:right everything messes up

  • # March 3, 2013 at 4:07 pm

    Here it [is](http://codepen.io/markomarkogame/pen/ILdth “is”) .

    This day has been a mess and as you can see now this stuff is happening. If you remove **float:right** from **.video** everything is alright, but with it its all .. I don’t know.

    # March 3, 2013 at 4:15 pm

    #bodyvideo:after {
    clear: both;
    content: ”;
    display: block;
    }

    :)

    # March 3, 2013 at 4:20 pm

    This helps but it doesnt tell me what the problems is and how to fix it. Why am I saying this ? Cause I’ve done similar divs and didnt need to do this clear both and display block

    What does this after mean ? .

    Do you know what is problem that is causing this ?

    I just don’t get it, but thanks

    # March 3, 2013 at 4:26 pm

    I don’t see a problem with the layout in Codepen with float:right applied.

    What is the actual issue?

    # March 3, 2013 at 4:29 pm

    The problem is that parent element doesn’t fill up to the height of the floated child elements. Floated elements are taken out of the regular flow of the page.

    The code I provided works as it uses :after to create a pseudo block element that clears the float. It is positioned after the floated elements and because that element is part of the flow the height of the parent element matches the height of the tallest floated element.

    # March 3, 2013 at 4:38 pm

    Ah yes, I see.

    @markomarkogame If you’re going to use floats, you have to know what effect that have on themselves and layout.

    @Merri has explained why a clearfix is required.

    http://css-tricks.com/snippets/css/clear-fix/

    # March 3, 2013 at 4:49 pm

    Alternative solution instead of the clearfix:

    .video{
    margin-left: 450px;
    width:500px;
    }

    This works, because it adds enough margin to “ignore” the floated element. Also because .video is not floated (and thus stays in page flow) the height of the parent element accounts for it.

    # March 3, 2013 at 4:56 pm

    Thanks Merri :) Also can i go with overflow:hidden ?

    # March 3, 2013 at 4:59 pm

    It also works. It just prevents you from positioning any child elements outside of the parent element’s boundaries which is why clearfix is a “better” solution in some cases.

    In general CSS still lacks a true good layouting solution so we’re very much hacking around positioning elements via floats. Flexbox is the future :)

    # March 3, 2013 at 5:35 pm

    If we could speed up time … :)

    So i put overflow hidden on videounutra

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

You must be logged in to reply to this topic.

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