Element margins ignored after floated element

Question

I have a "cleared" <hr> tag with margins top and bottom. However, after two floated elements as columns, the top margin is ignored and the line sits right below the text.

CSS:

hr {
 width: 100%;
 height: 1px;
 border: 1px;
 background-color: #d3d7cf;
 color: #d3d7cf;
 clear: both;
 margin: 16px auto;
}
.column {
 text-align: center;
 float: left;
 margin-right: 16px;
 width: 200px
}

HTML:

<hr/>
<div class="column">asd<br />fgh</div>
<div class="column">asd</div>
<hr/>

I found out that I can wrap the columns in a div with overflow: hidden, but is there a solution where I don't need to add extra markup to the HTML?

Answer 1

Add float:left to the HR style.

This should now make the HR play in the same flow as the floated DIVs and apply the top margin that you were missing in the first version of your CSS.

Answer 2

Add margin-bottom: 16px to the "column" class.

Or add padding to the columns (obviously not if you're using borders on the column class).