Menu
I have a two-column layout, sidebar on the left, content on the right.
So I float the sidebar left, and give the content on the right a margin. All is fine and well...
Until, a child element of the content has a clear applied to it, it jumps below the sidebar.
Is there a way to make children element only float and clear within it's parent container?
As a picture is worth 1000 words, here's a JSFiddle:
http://jsfiddle.net/qRYYm/1/
391
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
Method 1 (Using Overflow Property): We can use the overflow property of CSS to prevent the parents from collapsing. Set the value of the overflow property as “auto” for the parent and it will not collapse any more.
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.
Answer: Use the CSS clear property When float property applied to the element inside the non floated parent, the parent element doesn't stretch up automatically to accommodate the floated elements. This behavior is typically known as collapsing parent.
If you add overflow:auto; to .content that should see you right.
179
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
