0

I'm trying to make a header and footer in css. Following is my code:

HTML

<div id="container">
    <div id="header">Kaboom!</div>
    <div id="footer">Kaboom!</div>
</div>

CSS

#header{

    background-color:orange;
    width:500px;
    height:20px;
    border:3px solid blue;
    border-left-style:none;
    border-right-style:none;
    list-style-type:none;
    border-top-style:none;
    text-align:center;
}
#footer{
    margin-top:455px;
    background-color:pink;
    width:500px;
    height:20px;
    border:3px solid blue;
    border-left-style:none;
    border-right-style:none;
    list-style-type:none;
    border-bottom-style:none;
    text-align:center;
}
#container
{
    margin:auto;
    background-color:#addadd;
    width:500px;
    height:500px;
    border:5px solid blue;
    border-radius:5px;
}

jsfiddle

Although My code is working fine that is header is fitted at the top and footer at bottom. But I had to do many things manual for example I had to remove borders from inner elements, similarly I had to set margins by build and try method. My Question is that is there exist some mathematics here that is if container height and width is 500px then to fix elements inside it they should have some plus or minus pixels relative to the container. Similarly from what margin the header should be placed and at what margin relative to the container the footer be placed or is there some other efficient method?

Naseer
  • 4,041
  • 9
  • 36
  • 72

1 Answers1

1

How about this, position:relative to the #container, and then position:absolute to the footer and header. 

#container {
    position: absolute;
    margin:auto;
    background-color:#addadd;
    width:500px;
    height:500px;
    border:2px solid blue;
}
#header {
    position: absolute;
    background-color:orange;
    top: 0;
    width:500px;
    height:20px;
    border-bottom: 2px solid blue;
    text-align:center;
}
#footer {
    position: absolute;
    bottom: 0;
    background-color:pink;
    border-top: 2px solid blue;
    width:100%;
    height:20px;
}

jsfiddle

svnm
  • 22,878
  • 21
  • 90
  • 105
  • Steve did not mine was better?since in your code header and footer were not fitting right. – Naseer Oct 28 '14 at 10:27
  • 1
    my example has the header and footer positioned always at the top and bottom, but I had to put the borders in manually with border-top or border-bottom. Hope it helps – svnm Oct 28 '14 at 10:31
  • steve what is the use of position absolute here and that too even in each element? – Naseer Oct 28 '14 at 10:31
  • position:relative in the parent will make the child parent:absolute still relative to the parent – svnm Oct 28 '14 at 10:33
  • just found another similar question [here](http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom) – svnm Oct 28 '14 at 10:34
  • you can say but that question was a subset of mine.did not that? – Naseer Oct 28 '14 at 10:38