Problems adding a top margin for a complicated fluid layout

Question

First, check out a working example of the layout I have: http://jsfiddle.net/EPC8c/2/

What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)

The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.

Any help with this would be amazing.

HTML

<div id="container">

    <header></header>

    <div id="content"></div>

    <footer></footer>

</div>

CSS

html, body {
    background: #ff3333;
    margin:0;
    padding:0;
    height:100%;
}

#container {
    position:relative;
    background: #FFF;
    margin: 0 auto;
    width: 200px;
    min-height:100%;
}
header {
    height: 60px;
    background: #888;
}
#content {
    background: #FFF;
    min-height: 200px;
    padding-bottom: 60px; /*FOOTER HEIGHT*/
}

footer {
    position:absolute;
    bottom: 0;
    width: 200px;
    height: 60px;
    background: blue;
}

Does your top margin have to be a set px height, or can it be a percentage as well? — Mike, Oct 10 '12 at 22:46
Hi Mike, yes I need a specific margin at the top per the design. But this is killing me... ha. When you add the margin the 100% gets pushed down with it. — Tom, Oct 10 '12 at 22:56

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

Here's a solution, courtesy of this question: CSS 100% height with padding/margin

JSFiddle:
http://jsfiddle.net/EPC8c/5/

HTML:

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="content">

        </div>
        <footer></footer>
    </div>
</div>

CSS:

#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}

edited May 23 '17 at 10:24

Community

1
1

answered Oct 10 '12 at 23:03

Mike

1,559
10
17

Well... that would be exactly it. Thank you so much! – Tom Oct 10 '12 at 23:11

score 0 · Answer 2 · answered Oct 10 '12 at 22:57

It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:

http://jsfiddle.net/EPC8c/3/

<div id="wrapper">
    <div id="container">
        <header></header>
        <div id="content">

        </div>
        <footer></footer>
    </div>
</div>

CSS:

#wrapper {
position: absolute;
width: 100%;
height: 90%;    
padding-top: 10%;
padding-bottom: -10%;
}

Problems adding a top margin for a complicated fluid layout

2 Answers2