So let's begin:
First we will change CSS file, everything stays same if not mentioned to change, starting with color of content from basic tutorial, change background to this code. This will actually be background of left column and padding will be set to 0, cause it will be defined in Left and Right column. New code for Content:
CODE
#Content{
width:750px;
background:#BEB8B8;
margin:0;
padding:0;
}
width:750px;
background:#BEB8B8;
margin:0;
padding:0;
}
Oki. Next thing that we will do is definition of Left column. We will float it to left. Float means there is still space on opposite side.
In our case this is 750px – 150px = 600px of free space on opposite side. Will be needed for Right column.
It will be 150 pixels of width. Height will depend on left or right column, so there is no need to define this. Color for Left column is defined in Content, so here we use code: background: none; . Padding is taken from first tutorial and it is same as it was before for Content:
Code for Left Column:
CODE
#Left{
float:left;
width:150px;
background:none;
margin:0px;
padding:10px 0px 0px 0px;
}
float:left;
width:150px;
background:none;
margin:0px;
padding:10px 0px 0px 0px;
}
Now we will define Right column. Width will be by calculation 600px. Padding same as for Left column. No big fuss at all. It is floated to right with code: float:right; . Color of Right column is defined in this properties.
Code for Right column is:
CODE
#Right{
float:right;
width:600px;
background:#D0C9C9;
margin:0px;
padding:10px 0px 0px 0px;
}
float:right;
width:600px;
background:#D0C9C9;
margin:0px;
padding:10px 0px 0px 0px;
}
Next thing that we need is named CLEAR – FLOAT. This is a hack actually. There are many version of it over the net. I have started to use this one, which gives me best result in every browser. What this hack does? Float makes your site to collapse if you woudn't use this hack. I removed Left column here for better representation of this collapse. We see that footer has gone up to the header like there wasn't any Content (due to float property).
So basicly what we do is:
1. Floatcontainer is container that will prevent collapse.
2. Left coloumn text inside end of Left column.
3. Right coloumn text inside end of Right column.
4. end of Floatcontainer column.
Here is code for HTML file, take a look how is content built now. But firstly remember my 1,2,3,4 points that are explained in a paragraph before:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centered website with two columns.</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>
<style type="text/css" media="all">@import "layout12.css";</style>
</head>
<body>
<div id="Wrapper">
<div id="Header"><p class="text">Header</p></div><!--Header-->
<div id="Content">
<div class="floatcontainer">
<div id="Left">
<p class="text">Link 1</p>
<p class="text">Link 2</p>
<p class="text">Link 3</p>
<p class="text">Link 4</p>
<p class="text">Link 5</p>
<p class="text">Link 6</p>
</div><!--Left-->
<div id="Right">
<p class="text">Things in the future have changed dramatically.
I bought Canon A40 in year 2002 and took several interesting pictures with it.
Later I bought Sony DSC S-75 cause I liked its macro potencial.
But I sold it quickly cause it had lot of noise in images and awful white balance.
Just before end of year 2003 I bought myself second hand Canon G3 which I am still using.
Canon G3 is very good prosumer camera with pleasant results.</p>
<p class="text">Things in the future have changed dramatically.
I bought Canon A40 in year 2002 and took several interesting pictures with it.
Later I bought Sony DSC S-75 cause I liked its macro potencial.
But I sold it quickly cause it had lot of noise in images and awful white balance.
Just before end of year 2003 I bought myself second hand Canon G3 which I am still using.
Canon G3 is very good prosumer camera with pleasant results.</p>
<p class="text">Things in the future have changed dramatically.
I bought Canon A40 in year 2002 and took several interesting pictures with it.
Later I bought Sony DSC S-75 cause I liked its macro potencial.
But I sold it quickly cause it had lot of noise in images and awful white balance.
Just before end of year 2003 I bought myself second hand Canon G3 which I am still using.
Canon G3 is very good prosumer camera with pleasant results.</p>
</div><!--Right-->
</div><!--Float-->
</div><!--Content-->
<div id="Footer"><p class="text">Footer</p></div><!--Footer-->
</div><!--Wrapper-->
</body>
</html>
<html>
<head>
<title>Centered website with two columns.</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>
<style type="text/css" media="all">@import "layout12.css";</style>
</head>
<body>
<div id="Wrapper">
<div id="Header"><p class="text">Header</p></div><!--Header-->
<div id="Content">
<div class="floatcontainer">
<div id="Left">
<p class="text">Link 1</p>
<p class="text">Link 2</p>
<p class="text">Link 3</p>
<p class="text">Link 4</p>
<p class="text">Link 5</p>
<p class="text">Link 6</p>
</div><!--Left-->
<div id="Right">
<p class="text">Things in the future have changed dramatically.
I bought Canon A40 in year 2002 and took several interesting pictures with it.
Later I bought Sony DSC S-75 cause I liked its macro potencial.
But I sold it quickly cause it had lot of noise in images and awful white balance.
Just before end of year 2003 I bought myself second hand Canon G3 which I am still using.
Canon G3 is very good prosumer camera with pleasant results.</p>
<p class="text">Things in the future have changed dramatically.
I bought Canon A40 in year 2002 and took several interesting pictures with it.
Later I bought Sony DSC S-75 cause I liked its macro potencial.
But I sold it quickly cause it had lot of noise in images and awful white balance.
Just before end of year 2003 I bought myself second hand Canon G3 which I am still using.
Canon G3 is very good prosumer camera with pleasant results.</p>
<p class="text">Things in the future have changed dramatically.
I bought Canon A40 in year 2002 and took several interesting pictures with it.
Later I bought Sony DSC S-75 cause I liked its macro potencial.
But I sold it quickly cause it had lot of noise in images and awful white balance.
Just before end of year 2003 I bought myself second hand Canon G3 which I am still using.
Canon G3 is very good prosumer camera with pleasant results.</p>
</div><!--Right-->
</div><!--Float-->
</div><!--Content-->
<div id="Footer"><p class="text">Footer</p></div><!--Footer-->
</div><!--Wrapper-->
</body>
</html>
Working example and source available: here.
CSS file is available: here.
Any suggestions to make this script better is welcome. Script is checked in Firefox, Opera and Internet Explorer. Enjoy.
Robert
to Trap17 even tho I also have hosting at Computinghost.com. This is a place I like to stay 
