CODEWITHSUNDEEP
htmlcss
Seong Lee
Seong Lee

Reputation: 10520

Margin not working with float elements

On my web page, I have a logo and a menu that make up header elements and a hero unit under it. Now I want to give it some bottom margin so there is enough negative space between header and hero unit but this bottom margin (100px) is not applying. Same thing if I try to give top margin from hero unit.

.header {
    width: 95%;
    margin: 20px auto 100px;
}

Here is my working sample JS BIN

Upvotes: 9

Views: 24859

Answers (3)

Sander Koedood
Sander Koedood

Reputation: 6337

Adding a div under it with:

.someclass {
     clear: both;
}

would help. But even easier is:

.header {
    width: 95%;
    margin: 20px auto 100px;
    overflow: hidden;
}

If you add the overflow: hidden; the browser will be forced to calculate the size of the elements within, despite them being floated. When the size is calculated, it also knows where to start the margin-bottom.

One more popular uses of setting overflow, strangely enough, is float clearing. Setting overflow doesn't clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared.

Source

The difference between auto and hidden in this case, is that with hidden, it will hide everything that overflows, when it doesn't have enough room anymore, and with auto, it will create a scrollbar.

EDIT:

Since this question apparently is still active, I'll add the most common way of solving this in the present day:

.header:after {
    clear: both;
    height: 0;
    width: 100%;
    content: '';
    display: block;
}

This is the same as the first method, but then without having to add another element. This is the way to go if setting overflow is not an option (or even if it is an option, this would be better).

When I first posted this answer, it wasn't an option as it was not supported by IE 6 / 7, which were still broadly used back then.

Upvotes: 19

franchez
franchez

Reputation: 567

I think it's a problem in your margin attribute order.

If I change your property from: 20px auto 100px; to: 20px 0px 100px 0px then I have bottom space appearing.

Upvotes: -1

Ireally Rock
Ireally Rock

Reputation: 236

you could add a clearfix to your header or wrapper tag. This is useful bit of css to include in your file. More about the clearfix can be found here

http://css-tricks.com/snippets/css/clear-fix/

Upvotes: 0

Related Questions