Question

Sorry for the silly question but for some reason this part of HTML/CSS layout always gets me…

I have a website at http://kdmalikdesign.com/test/LinguisticPeers/index.html. Just practicing HTML/CSS/jQuery and eventually PHP/Databases.

In chrome the footer ends up being way too long. In firefox the footer is about three times what I want it and in safari the same. Right now i have height 100% on the html and body so that the background image expands to everything that is showing.

To compensate for the footer (now being too long) will I have to make the main container a minimum length so the footer will accomodate the space? Is there a general design rule over this? or CSS rule?

Basically what is happening is I like the way the header and main container look but since it doesn’t fill the whole browser window it ends up making the footer wayyyy too long OR if html,body 100% isn’t there, there becomes a white space below the footer. My CSS code is below if you want to quickly check it.

The only heights are 100% on the html,body. The Header has a height of 100px and each container is 160px. The footer is also 55px.

html, body, div, header, footer, article, h2 {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    background-image: url('images/bkg-img.jpg');
    background-repeat: repeat;
}
header {
background: #6888fd; /* Old browsers */
background: -moz-linear-gradient(top, #6888fd 0%, #1c46e9 55%, #0330e4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6888fd), color-stop(55%,#1c46e9), color-stop(100%,#0330e4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* IE10+ */
background: linear-gradient(to bottom, #6888fd 0%,#1c46e9 55%,#0330e4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6888fd', endColorstr='#0330e4',GradientType=0 ); /* IE6-9 */
height: 100px;
}

#background-container {
    padding-top: 50px;
    padding-bottom: 25px;
}

#container {
    margin: 0 auto;
    background-color: #587DFF;
    height: 230px;
    width: 830px;

    text-align: center;
    padding-top: 100px;

    -moz-border-radius: 25px;
    border-radius: 25px;
}

#article-container {
    width: 960px;
    margin: 0 auto;
}

article {
    border: 4px solid #9AADFA;
    background-color: #002DE2;
    color: #fff;
    width: 280px;
    height: 160px;

    float: left;
    margin-left: 30px;
    margin-top: 25px;
    /* 
            display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
    */
}

.clear {
    clear: both;
}

span {
    display: block;
    padding-top: 10px;
    color: #6D8EFF;
}

h2 {
    padding-left: 10px;
    padding-top: 5px;
}

p {
    padding-left: 5px;
    padding-right: 5px;
}

footer {
    text-align: center;
    border-top: 1px solid #7493FF;
    background-image: url('images/bkg-img.jpg');
    background-repeat: repeat;

    height: 55px;
}

nav {
    float: right;
    color: #84A0FF;
    position: relative;
    top: 60px;
    left: -75px;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    padding-left: 10px;
}

#login-container {
    float: right;
    padding-right: 50px;
    padding-top: 25px;
    color: #fff;
    position: relative;
    left: 450px;
}

#header-container {
margin: 0 auto;
    width: 960px;
    height: 100px;
}

Answer 1

If you want the footer to stick to the bottom of the page, something like this might be helpful.