Solving the Image Float

— Topic: CSS

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.

Latest Entries

Me, Elsewhere

icons by Komodo Media


JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript
Promote JavaScript


Disclaimer

The thoughts and opinions expressed here are mine alone, and are not necessarily shared by any other living person.