When you float:right everything messes up

[apart]

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.

[Merri]

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

:)

[apart]

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

[Paulie_D]

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

What is the actual issue?

[Merri]

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.

[Paulie_D]

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.

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

[Merri]

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.

[apart]

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

[Merri]

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 :)

[apart]

If we could speed up time … :)

So i put overflow hidden on videounutra

[Author]

Posts