I love to use float:left and float:right. Anytime you use a float,though and the containing div for that float isn’t big enough to hold it the floated thing (img div or p) will over flow the containing div and run into the next element, be it div img or p.
Case in point: a blog with posts and floated images in the posts.Textwrap around a floated thumbnail image is sweet. A problem comes only when the floated image is bigger than the paragraphs that make up the rest of the post. You could use a smaller image or write more stuff. Or you could clear your floats!
Most themes seem to be written in the same way:they grab the header then serve up the content div. Then comes the post div that has the unique id of the post so the comments can work.Next comes the entry div which holds the tag for the excerpt or the content.Then comes the next post previous post navigation.Then the loop closes. Then the content div closes.Then they grab the sidebar(s) and then they get footer.php
So what sould you do? I’m writing this because I had this exact problem
(of course) but did not have the luxury of writing more content (it’s not my content) and the post needed to have a big image. It didn’t really need a floated image but I wanted the text of the post to show alongside the image rather than under it, so I floated the image anyway.
You could add <div class="clear"></div> (corresponding css .clear{clear:both}) to the file after the containing div with the float, in this case div.entry, which would solve the problem but wouldn’t be semantically correct because <div class="clear"></div> is an empty HTML element. You might as well have a page full of tables with tds that have spacer.gifs in them to hold them in place! Ok, so maybe <div class="clear"></div> put once in a document isn’t as bad as that but it is similar in that the added HTML element doesn’t actually format or provide content.
Therefore, it’s better to take care of the problem with CSS by adding overflow:hidden to the containing div. Add overflow:hidden to div.entry and div.post and then go on and float big images in your short posts.
Using empty HTML elements to enforce styling is a slippery slope.
Ever seen this beauty?
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
I have.
What about this gem?
<div>
<p>content content content</p>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
</div>
Both do the job of adding more space where needed when the content fell short and the designer needed to find a way to fix that for their page to look the way they wanted it to…
It’s not the best way to do it but a lot of the time a designer can’t rely on content alone in text or images to provide the formatting they need.Still, it’s better to take care of this in the stylesheet rather than in the html document.
P.S. I have made all these mistakes and many more far more hideous!