Welcome to Miyuki Andvik!

How to...

How to make a webpage with 2 columns and a footer at the end with CSS!

This is not the only webpage I've made and in another one of my webpages I wanted to do something which seemed imposible with CSS. Here I will attempt to explain what you need to do. If you just want the code, go to the bottom of the page here. It all started out when I had a problem with font and asked for help in a forum. They told me my html coding was messy and that I should validate it. Read about that here. And in the process of validating it I found that I wasn't allowed to use the "width" attribute with my td tag if I wanted to use strict html. So I found ways of using CSS to make my webpage. But then I got stuck on a problem for hours. The problem was that I couldn't make my left column stretch with my right column so that the background would both strech and look like one long webpage. If my main content was long, the background image would just stop where the menu's stopped and it just looked uneven! I found webpages where they "cheated" this by using background color that was the same as the layer for the menu column but I had a background image and that just didn't work for me. Again I wrote my problem in a forum and someone there was able to help me!

This is how you start

The technical explanation where I learned about it is here. First you create a container for your columns. In my case I had a header, a left menu column, a right content column and a footer. So I wrote something like this:

<div id="main" class="clearfix"> <!-- container -->

  <div class="header"></div>

  <div class="menu">My menu's</div>

  <div class="content">My content</div>

</div>
  <div class="footer">My footer</div>

Unless you need a specific background image for your menu, you just cut your background image into 2 parts. One called header and one called layerbackground, for example. Then you specify the "background-image" in your CSS for .header and #main respectively. For example, my webpage background is 750 by 760 pixels. I cut the top part, 750 by 160 pixels and name it header.jpg. Then I call the rest 750 by 600 layerback. Then my CSS would look something like this:

body {	padding:0;
	margin:0;
	}

#main {	background-image:url(background.jpg);
	margin:auto;
	width:750px;
	background-repeat: repeat-y;
	padding:0px;
	padding-bottom:20px;
	border:0px solid #ff0000;
	}

div.header {
	background-image:url(header.jpg);
	width:750px;
	height:160px;
	border:0px solid #c0c0c0;	
	}

div.menu {
	width:120px;
	float:left;
	padding:0px;
	}

div.content { 
	margin-left:170px;
	background-color:transparent;
	width:520px;
	padding:0px;
	}

div.footer {
	background-image:url(footer.jpg);
	margin:auto;
	width: 750px;
	text-align: center;
	font-family:times, arial, sans-serif;
	font-size:x-small;
	font-weight:lighter;
	color:#ffffff;
	}

Then in your CSS you define a class called clearfix

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

The after property in CSS adds a period at the end of the container layer. Then you set the display to "block" because if you don't this element defaults to inline and inline elements can not receive the "clear" property. The "hight" and "visibility" properties just makes the period invisible because all you want is for this element to push the bottom edge down, and not actually show a period. The "clear" property is what actually pushes the bottom edge of the container down. By default when you put a clear property on an element it puts it lower then the last element on either the left side, right side or both sides. By setting it to "both", you are putting the period lower then the last element on both sides. And since you have contained your menu and main contents inside this container, the period is placed at the end of whaterver is longest. This stretches the length of the container which has your main background image. And since it stretches to however long your webpage is, your background image will also repeat as long as it needs to. Now you don't have uneven webpages anymore! And if you want a footer, just add a div layer after the container like I did. It will line up nicely at the bottom of the page.

Problem

Yes, there are always problems, specially when it comes to different browsers. The "clear" property doesn't work with IE. So here is an extra you add to your CSS.

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

To tell you the truth I didn't quite understand how this works. Something about creating an extra space at the end of your webpage. This allows you to add your footer, I think . And you need to add that other clearfix class for IE/Mac. Well whatever the explanation, you can read about it in that link I gave earlier. The point is it works.

The code

If you know what you're doing and just want the code, this is it. Add it in your CSS somewhere and specify a class in your container as "clearfix".

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
.clearfix {display: block;}
/* End hide from IE-mac */

Examples

Here are the other websites I created where I use this feature. In the first one I don't have a specific menu background and in the second one I do. Just right click and view the source.