When you float:right everything messes up
# 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: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:49 pm
Alternative solution instead of the clearfix:
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: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 :)
You must be logged in to reply to this topic.