Element fields are ignored after placing an element

Question

I have a "cleared" <hr> with fields above and below. However, after two floating elements in the form of columns, the top field is ignored, and the line is directly 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 using overflow: hidden , but is there a solution where I don't need to add extra markup in the HTML?

Answer 1

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

Or add padding to the columns (obviously if you are not using the boundaries of the column class).

Answer 2

Add float:left to your HR style.

Now you have to make the HR game in the same stream as the floating DIV , and apply the top margin that you did not have in the first version of your CSS.