I have an issue with twitter bootstrap that looks a little bit strange to me. I have a sidebar with fixed with at the left side and a main area.
<div> <div id="sidebar"> <ul> <li>A</li> <li>A</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>...</li> <li>Z</li> </ul> </div> <div id="main"> <div class="clearfix"> <div class="pull-right"> <a>RIGHT</a> </div> </div> <div>MOVED BELOW Z</div> </div>
#sidebar { background: red; float: left; width: 100px; } #main { background: green; margin-left: 150px; overflow: hidden; }
Inside the main area I have some content with pull-left and pull-right with is cleared by a clearfix.
The problem is that the content below the clearfix-div is moved to be lower than the sidebar-content.
I made a fiddle for this: http://jsfiddle.net/ZguC7/
I solved the problem by setting the "overflow: collapse" to #main, but I dont understand it and would be very happy if somebody can explain what is causing this issue.
Quickly and easily clear floated content within a container by adding a clearfix utility. Easily clear float s by adding . clearfix to the parent element.
A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally.
Clearfix property clear all the floated content of the element that it is applied to. It is also used to clear floated content within a container. Example 2: With clearfix property. Without using the clearfix class, the parent div may not wrap around the children button elements properly and can cause a broken layout.
The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.
clearfix
should contain the floating elements but in your html you have added clearfix
only after floating right that is your pull-right
so you should do like this:
<div class="clearfix"> <div id="sidebar"> <ul> <li>A</li> <li>A</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>...</li> <li>Z</li> </ul> </div> <div id="main"> <div> <div class="pull-right"> <a>RIGHT</a> </div> </div> <div>MOVED BELOW Z</div> </div>
see this demo
Happy to know you solved the problem by setting overflow properties. However this is also good idea to clear the float. Where you have floated your elements you could add overflow: hidden;
as you have done in your main.
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