Question

I’ve been learning html and css for the past couple weeks. Now I have to make a portfolio website for school which is due next Wednesday. Sadly, I can’t get it to work the way I want and was hoping to find some help on this website.

I had this idea of a site consisting of a full width div and a full width footer. The plan was to make the footer always stick to the bottom of the div (unless the screen is to small so the footer doesn’t overlap the content) and the div resize according to the volume of the content. It seems to work on my laptop which has a small screen but when I open the website on a computer with a larger screen it doesn’t position the footer correctly.

The website is viewable at http://home.deds.nl/~gwleuverink/concept/index.html.

I hope someone can help me with this!

Answer 1

See this example

HTML

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

CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

for more info check this link http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page