Bar notsticking to picture css/html - html

Question

I'm having a problem with css.
When my image becomes smaller than the list next to it, the grey bar at the bottom of the picture (.meter) won't stick anymore to the picture. I don't know how to solve this. I think it's the opposite of clear that I need, But I couldn't find it on the internet
here is the jsFiddle:
http://jsfiddle.net/RnSq7/
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<section>
<p>
<ul>
<li>long list</li>
<ul>
</p>
</section>
<div class="meter"><span style="width: 50%"> </span></div>
I hope sombeody can help me, thanks in advance.

Answer 1

Just change the order in your markup :
FIDDLE
<img src="http://images7.alphacoders.com/407/407975.jpg" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
...
</ul>
</p>
</section>
I didn't mention but you are missing the / sign on your closing ul tag in your fiddle. I corrected that typo in the demo too.

Answer 2

Simplest way is to take the div and put it just after the img. But if your div will not house any other element, I would suggest to take it off and use 'border-bottom' property.
Option 1:
<img src="" />
<div class="meter"><span style="width: 50%"> </span>
</div>
<section>
<p>
<ul>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
<li>shalalalala</li>
</ul>
<p>
</section>
Options 2:
<img src="" class="test"/>
and then in stylesheet
.test {
border-bottom: 20px solid black;
}