Home/ Questions/Q 8313181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T20:24:21+00:00

I made this: HTML: <body> <div id=header > </div> <div id=main > </div> <div

  • 0

I made this:

HTML:

<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>

CSS:

body
{
    margin:0px;
}
#header
{
    width:100%;
    background-color:black;
    height:60px;
}
#main
{
    width:300px;
    border:1px dotted black;
    margin:0 auto;
}
#footer
{
    width:100%;
    background-color:black;
    height:40px;
    position:absolute;
    bottom:0px;
}

http://jsfiddle.net/VpwQQ/2/

But as you can see, the main div doesn’t have a height.

Then I replaced my css by that:

body
{
    margin:0px;
}
#header
{
    width:100%;
    background-color:black;
    height:60px;
}
#main
{
    width:300px;
    border:1px dotted black;
    position:absolute;
    margin:0 auto;
    bottom:60px;
    top:80px;
}
#footer
{
    width:100%;
    background-color:black;
    height:40px;
    position:absolute;
    bottom:0px;
}

http://jsfiddle.net/VpwQQ/1/

But then, the horizontal center doesn’t work.

How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not sure what you’re trying to do, but I’ll give my explaination of what’s going to happen with your code:

    Your #main div doesn’t have a height because it doesn’t have a height CSS property, nor does it have any content.

    You should add either a height: 100px or just add some content and you will see it gets a height.

    The reason why I ask what you want to do is because you’re not very clear as to what you want your final product to look like.

    You’re going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you’ll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/

    You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you’re trying to do, but if you’re just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.

    Edit:

    See http://jsfiddle.net/VpwQQ/4/ if you’re just trying to set up a normal website layout.

    If you want the footer to “stick” to the bottom of the page all the time then you will need to use position: fixed but I don’t think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/

    Lastly, to get both footer and header to “stick” see http://jsfiddle.net/VpwQQ/8/

    • 0