Search code examples
cssfooter

css - Footer is not expanding

Im very new to css and I still find hard to understand some concepts especially positioning. Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute; bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.

Below is the screen shot:

enter image description here

The maroon is the footer.

In my footer I don't use div but instead I use html element <footer>.

My css codes:

div#container {
    height: 100%;
    width: 1000px;
    margin: auto;
    background-color: #C9C9C9;
    position: relative;
}

footer {
    background-color: #340B09;
    height: 50px;
    position: absolute; 
    bottom: 0;
}

Please help.

Solution

  • I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.