If you ever use the float property… sometimes things just won’t align properly on your web pages. And no matter how hard you try to fix it with <br> tags and forced spaces… the problem still exists.
We ran into this very problem on this website as evident by the image posted above. Most of the headlines for each post were interfering with the way the first paragraph was being displayed. It looked crappy and I needed to figure out how to solve this issue.
I struggled with the site’s code and messed around with the CSS until I found a short little line of code that puts those floating elements back into their proper places.
<div style=“clear:both;”></div>
Adding this separate division and clear property into your code tells the previous code that it is not to interfere with the code that follows… or in other words, “The float stops here!”
Other values for the clear property are clear: left (don’t run alongside any left-floated boxes) clear: right (don’t run alongside any right-floated boxes), and clear: none.
September 27th, 2008 at 10:26 pm
Well, that code is a little overally bloated. Clearing your floats is a necessity, but using a whole div, and inlined style like that is unnecessary.
I’d through this in your CSS:
.clear{
clear:both;
}
and this in your HTML:
Less HTML, and less CSS if used multiple times.