text next to image

I have some code like this:

<h3>title1</h3>
<p><img>text</p>
<h3>title2</h3>
<p>text</p>

Code (markup):

My problem is when I put a float: left image before the text and if the text is not long enough to clear the image, the next <h3> title just follows on next to the image instead of starting on a new line. If i include a clear: left in my <h3>, it clears my sidebar menu as well which is also float: left.

How would I solve this?

 

Move the <img> out of the <p>...</p> and float it. You should be fine.

 

another option is to use 'clear'.

If you put content in a div after the floated image, use this:

#content {
  clear: left;
}

Code (markup):

This clears elements that have been floated left. If you use clear: both; this clears both left and right floated elements.

 

You should also find this useful ... http://positioniseverything.net/easyclearing.html

Remember to test in different browsers before going live though, such as browsershots.org