Menu
i dialy deal with float: left; and the CSS-reset by Eric Meyer with class="clearfix". But there is one special case, i wonder how to clear a floatd element correctly: Within <ul> ... </ul>.
Wrong height of the <ul> though using a clearer. The clearer should be within the <ul>. Let's try ...
Correct height, but the HTML-code ist not valid!
<ul> with valid code?Thanks, Johannes
412
This is default When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.
Clearing Floats. Clearing a float means clearing away all subsequent content so that the element is still floated but is not surrounded by the other elements. The clear property takes a value of left, right, or both.
both - The element is pushed below both left and right floated elements inherit - The element inherits the clear value from its parent When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left.
you can clear float by giving overflow:hidden; on parent element. check the DEMO. Like in your case use in on section element. Down voter please explain why -1 .
Simply add overflow: hidden to the ul element's ruleset. Search for 'clearing floats' on Google or Stack Overflow for other solutions, though in this case this should be the cleanest.
jsfiddle demo: http://jsfiddle.net/9sxrN/1/
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
