Element margins ignored after floated element
css, css-float
Solution
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).
Problem
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?