Question

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 row.

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

Answer 1

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">