CODEWITHSUNDEEP
csscss-float
DisgruntledGoat
DisgruntledGoat

Reputation: 72510

Element margins ignored after floated element

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?

Upvotes: 4

Views: 4096

Answers (2)

Cathal
Cathal

Reputation: 286

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).

Upvotes: 3

random
random

Reputation: 9955

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.

Upvotes: 3

Related Questions