My hr block is not showing up where I want it to

I am trying to make a help screen that pulls up an html file using an android webview that shows a list of icons and gives a description for each. I would like to put an hr tag between each icon/description ro开发者_如何转开发w.

My code looks like this:

<div>
<img src=[link] align="left"/>
<p> [Description] </p>
</div>
<hr>

The problem is that if the image is taller than the description, the hr block runs into the image and stops, instead of being below the tallest element, and spanning the entire width. Is there a way to tell the hr block to come below the bottom of the lowest element in the div?

Thanks in advance

---

Try this in your CSS;

hr { clear: both; }

If there is no CSS then I'm lost. If the div isn't being floated, or none of the other elements are floated, I don't see how your problem could occur. Try adding the following CSS;

<hr style="float:left;width:100%;clear:both">

---

It may also be an issue with block display; particularly if this is occurring in IE, you may need to update your div's style so it's rendered as expected.

If it's IE-only, google hasLayout. Otherwise, as has been said, post your CSS.