Margin doesn't get applied to a footer

Question

Here is my website so you can see the problem: webpage

The problem is that my .footer Has a margin: 50px 0 50px 0; , but for some reason it doesn't appear to have that 50px margin from top. I don't understand what is causing the problem.

Here is full css of footer section (.dashed-footer is basically inner section of the footer with that dashed border.)

CSS

.footer {
    margin: 50px 0 50px 0;
    background-color: #1d130e;
    width: 100%;
    min-width: 1000px;
    height: 50px;
    border-top: 1px solid #0d0907;
    border-bottom: 1px soid #0d0907;
    clear: both;

    -webkit-box-shadow: 0px 0px 15px -1px #181513;
    box-shadow: 0px 0px 15px -1px #181513;
}

.dashed-footer {
    height: 37px;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    border-top: 1px dashed #613e27 !important;
    border-bottom: 1px dashed #613e27 !important;
    color: #e6d7bb;
    text-shadow: 1px 1px 0 #000;
}

I discovered something very strange, it doesn't move if you increment that value until you enter 500px, and then it jumps down! But I think I got the answer, give me a minute! — 11684, Aug 26 '12 at 12:52

score 4 · Accepted Answer · answered Aug 26 '12 at 12:50

4

overflow: hidden;

to the section.content is the answer. It is because the elements inside it are floated which takes them out of the normal flow of the document.

answered Aug 26 '12 at 12:50

PeeHaa

69,318
57
185
258

score 2 · Answer 2 · answered Aug 26 '12 at 12:56

2

I think it is because the margin is applied, 50px down from <section id="content">, but the trio is for some reason placed outside that section, and pushing the footer down! If you choose 'inspect element' and mouse-over <section id="content"> you can see it stops at the downside of the slides, and the trio is below there. I think the solution is to do margin: [height of trio plus margins, borders, etc] + 50px 0 50px 0;

answered Aug 26 '12 at 12:56

11684

7,240
12
46
69

What if the height is dynamic? – PeeHaa Aug 26 '12 at 12:58
Use calc(). Not very well supported, but as a fallback... @PeeHaa – 11684 Aug 26 '12 at 12:59
In IE to be substituted by expression(). – 11684 Aug 26 '12 at 13:00
Cool didn't know about `calc()`. Feels like something one should avoid though for this specific issue. Still may be useful for other things though. Thanks! – PeeHaa Aug 26 '12 at 13:00

Margin doesn't get applied to a footer

2 Answers2