How to position a line below a group of tags?

Question

I am trying to position a horizontal line under a group of tags on an app done on asp.net mvc. I believe I have to do that on the CSS but I just can't seem to find the right way to place such line. Every time I try, the line ends up at the right of the tags and I don't feel like using a whole bunch of
is the right way by far.

<div id="section">
    <div style="float:left; margin:20px">
        <img alt="Upload" src="/Content/Images/Upload_yellow.png"/>
        <img alt="Confirm" src="/Content/Images/Confirm_white.png"/>
        <img alt="Review" src="/Content/Images/Review_white.png"/>
    </div>
    <hr />

</div>

Can somebody orient me in the right direction here?

Answer 1

<hr style="clear: left" />

Answer 2

Ditch the <hr /> and add this change your CSS rule to <div style="float:left; margin: 20px; border-bottom: 1px solid #000;">

If you have multiple floated divs in the section div, put the border rule on that if you want it to extend all the way across and set either overflow:hidden; or overflow:auto so it doesn't collapse (which containers do when they only contain floated elements unless overflow is set). This way you can avoid setting a clear rule or adding extra markup for the line.

Answer 3

Jeff and Joel talked about this in Podcast #4. Specifically, the CSS-extremists would prefer you do that in CSS, but practical concerns override that. Keep it where it is now.