From GIMP to xHTML and CSS

Now the last thing we have to do, is make sure the central column is ALWAYS 100% high, so the borders always stretch all the way to the bottom of the browser.

To make our central column always be 100% high, we first need to do some preparation; we need to set body and html to 100% height:

body, html {
height: 100%;
}

Then we set the min-height value for #centralCol to 100%:

#centralCol {
min-height: 100%;
}

Now the height of #centralCol ALWAYS is 100% of the page. The code now becomes:

body, html {
height: 100%;
}

/* 1. Reset margins and paddings for all elements. You can use this, or you can use your own CSS reset rules */

* {

margin: 0;

padding: 0;

}

ul {

list-style-type: none;

}

/* 2. Setting a base font size */

body {

font-size: 62.5%;

font-family: tahoma, verdana, sans-serif;

background: url(assets/body-bg.png) left top repeat-x;

}

/* 3. Positioning the central column */

#centralCol {

width: 960px;

margin: 0 auto;

background: #ebedf1;
min-height: 100%;

}

/* 4. Styling the header block */

#header {

height: 140px;

background: url(assets/header-bg.png) left top no-repeat;

text-indent:-9999px;

}

/* 5. Styling the navigation */

#nav {

height: 90px;

background: url(assets/menu-bg.png) left top repeat-x;

margin-bottom: 20px;

}

#nav ul {

list-style-type: none;

padding-top: 15px;

}

#nav ul li {

width: 171px;

height: 58px;

margin-right: 40px;

float:left;

background: url(assets/menubutton-bg.png) left top no-repeat;

}

#nav ul li a {

display: block;

padding: 18px 5px;

text-align: center;

font-size: 1.4em;

text-decoration: none;

color:#333;

}

#nav ul li a:hover {

text-decoration: underline;

}

#centralCol {

font-size: 1.4em;

line-height: 1.6em; /* set the base line height inside the central Col */
padding: 0 20px;
background: #ebedf1 url(assets/centralcol-bg-faux.png) left top repeat-y;

}

#header, #nav, #body { padding: 0 30px; /* Padding to line up everything vertically */ }

/* 6. Styling the #body block */

#body p {

margin-bottom: 12px;

}

#body h2 {

color: #f1780f;

line-height: 0.8em;

margin-bottom: 2px;

font-size: 1.8em;

}

#body h3 {

color: #005ca1;

}

#body h2+h3 {

color: #f1780f;

font-size: 1.2em;

font-style: italic;

margin-bottom: 12px;

}

    #twoCols {

    float: left;

    margin-bottom: 40px;

    }

    #leftCol {

    float: left;

    width: 420px;

    padding-right: 30px;

    }

    #rightCol {

    float: right;

    width: 420px;

    padding-left: 30px;

    }

#footer {

position:relative;

clear:both;

height: 80px;

background: url(assets/footer-bg.png) left bottom repeat-x;

}

#footer p {

text-align: center;

position: absolute;

left: 50%;

top: 40%;

}

The final thing we want to do, is to make sure the FOOTER always sits at the bottom of the page. In order to do this, we need to take the footer DIV outside of the #centralCol div (so, right after the closing </div> tag for centralCol).

We give the #body a bottom padding of 80px to create some extra room (80px=height of the footer DIV), we give #footer a height of 80px, a width of 960px and center it using the same method we used for #centralCol. Then we use a negative top margin to 'pull' the footer into place.

Our final CSS code now is:

body, html {
height: 100%;
}

/* 1. Reset margins and paddings for all elements. You can use this, or you can use your own CSS reset rules */

* {

margin: 0;

padding: 0;

}

ul {

list-style-type: none;

}

/* 2. Setting a base font size */

body {

font-size: 62.5%;

font-family: tahoma, verdana, sans-serif;

background: url(assets/body-bg.png) left top repeat-x;

}

/* 3. Positioning the central column */

#centralCol {

width: 960px;

margin: 0 auto;

background: #ebedf1;
min-height: 100%;

}

/* 4. Styling the header block */

#header {

height: 140px;

background: url(assets/header-bg.png) left top no-repeat;

text-indent:-9999px;

}

/* 5. Styling the navigation */

#nav {

height: 90px;

background: url(assets/menu-bg.png) left top repeat-x;

margin-bottom: 20px;

}

#nav ul {

list-style-type: none;

padding-top: 15px;

}

#nav ul li {

width: 171px;

height: 58px;

margin-right: 40px;

float:left;

background: url(assets/menubutton-bg.png) left top no-repeat;

}

#nav ul li a {

display: block;

padding: 18px 5px;

text-align: center;

font-size: 1.4em;

text-decoration: none;

color:#333;

}

#nav ul li a:hover {

text-decoration: underline;

}

#centralCol {

font-size: 1.4em;

line-height: 1.6em; /* set the base line height inside the central Col */
padding: 0 20px 80px 20px;
background: #ebedf1 url(assets/centralcol-bg-faux.png) left top repeat-y;

}

#header, #nav, #body { padding: 0 30px; /* Padding to line up everything vertically */ }

/* 6. Styling the #body block */

#body p+p {

margin-bottom: 12px;

}

#body h2 {

color: #f1780f;

line-height: 0.8em;

margin-bottom: 2px;

font-size: 1.8em;

}

#body h3 {

color: #005ca1;

}

#body h2+h3 {

color: #f1780f;

font-size: 1.2em;

font-style: italic;

margin-bottom: 12px;

}

    #twoCols {

    float: left;

    margin-bottom: 40px;

 

    }

    #leftCol {

    float: left;

    width: 420px;

    padding-right: 30px;

    }

    #rightCol {

    float: right;

    width: 420px;

    padding-left: 30px;

    }

#footer {

position:relative;

clear:both;
height: 80px;

margin: -80px auto 0 auto;
width: 960px;

background: red url(assets/footer-bg.png) left bottom repeat-x;

}

#footer p {

text-align: center;

position: absolute;

left: 50%;

top: 40%;

}

And now we've got our FULLY styles, fully functional webpage! Join me in the next chapter, where we are going to make it look even better by using a custom web font called Sansation.