Solving the Image Float

This is so simple, I’m wondering why I hadn’t thought of it before. Chances are, someone out there already has, but I thought I would share it here. Awhile back, though I couldn’t seem to find his post, Bryan Veloso was bemoaning the fact that in order to have nicely presented articles with images, it required adding a class name to the image. This created a problem, because if you re-design or change your naming conventions, you have to go back through and clean up your articles. He said he spent several hours one day doing this, in preparation for a re-design.

I have been guilty of using putting classes into some of my articles too. While there’s nothing semantically wrong with this, surely I thought, there must be a better way. So, I’m sitting here reading an Ajax book, totally unrelated to CSS, and then it hits me – Just float all images to the left that reside in a <p>, and then give all common block level elements clear:both (or clear:left if you want to get all technical, sheesh). This way, if the image is in a paragraph with text in it, the text will wrap to the right, and if the image is one that takes up the width of the content area, or is in a paragraph by itself, it will line-break automatically. The markup would look something like this…

HTML:

<p><img src="..." alt="..." /></p>
<p><img src="..." alt="..." />Lorum ipsum...</p>

CSS:

#content p img {
  float: left;
}

#content p,
#content ol,
#content ul {
  clear: both;
}

With that bit of CSS implimented, there is no longer need to add an extra class name to float images, or to correct floating by adding a class to turn it off. Just go about writing your articles without giving it any thought, and let the styling help you out by taking care of itself. I could see this technique being a huge benefit to people making magazine style sites for clients. The copy editor can quit worrying about presentation, and just work on articles.