border-bottom going behing a floated image

[suttercain]

Hi guys,I am using a border-bottom on my <h2> tags instead of text-decoration so I can color the underline and also style it as dashed. The problem I am having is that I have a floated image left (maybe will sometime be right too) and the border-bottom is going behind the image for the width of the page. The text is fine and is to the right of the image. If I change the h2 tag to have a relative position the border-bottom is now on top of the image.Does anyone know how to have the border-bottom not go in front of, or on top of the image?Here is the code:

.main {font: 100%;}.floatImgLeft {float: left;padding: 2px;border: 1px solid #911f1f;margin-right:5px;clear:left;}h2 {color: #911f1f;border-bottom-color: #335f9e;border-bottom-style: dotted;border-bottom-width: 2px;font-size: 122%;position:static;}<div class="main"><img src="http://www.arb.ca.gov/images/pspeak.jpg" class="floatImgLeft" /><h2>Got no time for the jibba jabba!</h2>Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. Hello Yellow  Mellow Fellow. <ul class="bluelist">	<li>Item #1</li>	<li>Item #2</li>	<li>Item #3</li>	<li>Item #4</li></ul></div>

I also noticed this happens with the UL tag, it goes behind the image.Thanks

[newseed]

Give your h2 a margin-left of about 150px. Adjust to suit.