Image and text alignment are a very frequent source of frustration for website owners. Unfortunately, mixing text and images in HTML isn’t quite so simple as in Microsoft Word.
A common problem is horizontal alignment of images and / or positioning new paragraphs after a left- or right-floating image. See for example:
Here is a floating left-aligned image. Note that you need to specify either an image class (in WordPress <img class=”alignleft” src=”path-to-the-image” /> or else an <img align=”left” src=”…” /> attribute, along with (normally) an attribute style=”border-right: 5px;” or so You can do this either in Windows Live Writer or with the WordPress Visual Editor.)
Here is a new paragraph that I want to start after the image. As you can see it’s not working. I could put in a bunch of line breaks <br/> to make this happen, but the exact number depends on the width of my display and may also depend on the browser.
To accomplish this, you could use tables, of course, but this introduces its own set of problems and is also clunky. Here is a more elegant solution: just wrap the new paragraph around a <div style=”clear:both;”> </div>, for example:
This is my first lineRight before here I have (in HTML) <div style=”clear:both;”>. Notice the new paragraph starts at the bottom of the image. Then I close the </div>.
Nice tips!!!I love HTML skills and trying to improve them!!!
Thanks for the tips, this was very helpful
Nice tips, exactly what I’m looking for. But I’m a newbie with this stuff and could have really used a summary of the code used so I could copy and paste and play with the code on wordpress :(
Awesome, blog post!!
I like this post. That is one great tip, starting a paragraph after the floating image.