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 margin-bottom: 16px to the “column” class.

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