I have a div that is float:left, and after the div is the rest of the page. In order to keep the rest of the page below the div, I must first place a
<br clear="all">
Q: How do I position the rest of the page below the floated div? I think that I need to wrap the rest of the page in a new div and float it as well. But I tend to stay away from floats as much as I can.
clear: both
is the only way to clear AND keep the margin top intact on next element after floating vertical flow. However, one trick is to use pseudo on the clearing element. Example<h2>Im a heading after floating stuff and usally I got 20px margin top</h2>
Then CSS:h2:before { content: ""; display:table; margin-bottom: 20px; }
This is only good if the<h2>
has no background styles or border top applied to it as the pseudo will then be incuded. But for simple divs and wrappers this works well. – Jonas Lundman Jan 31 at 0:06