HTML Tips and Tricks: Use div with border in place of hr

I am by no means an expert with html or css.  Frequently I run into html or css issues that take me forever to get beyond.  Recently I had an issue with a horizontal rule (<hr />) having extra padding in Internet Explorer.  For some reason I could not figure out where the padding was coming from. 

I don’t think this was an IE issue since a completely clean sample of html did not show the hr padding (or margin) problem in Internet Explorer.  But for some reason the <hr> tag would not adhere to any padding or margin styling that I tried in Internet Explorer as it would in FireFox or Chrome.

After struggling with this for a while I realized I could use a <div> with a bottom border in place of the <hr>.  It worked very nicely and gave me more control over the dividing line that I was trying to place in my user interface.

<div style="height:1px; width: 100%; border-bottom:solid 2px #ccc;" />

Maybe this will help any of the other HTML/CSS impaired developers out there.