problem with CSS layout

[navyfalcon]

Wep Page
http://freetutorials.name/Reference1...tutorials.html
-
Problem:
How do I make the left side independant so I can put information in it longer than the middle and right side
-
Thank You
navyfalcon
-
The CSS:
* {
margin:auto;
}
body {
background-color: #FAEBD7;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
padding: 10px;
}
a:hover {
color: purple;
background-color: white;
font-weight: bold;
}

#header {
text-align: center;
border: 1px solid darkblue;
5px 50% no-repeat;
}

#header b {
display: block;
min-height: 120px;
margin: 0px;
padding: 0 200px;
font-weight: normal;
}
* html #header b {
height: 200px;
}
#header h2 {
color: #FF0000;
font-size: 180%;
margin-bottom: 10px;
}
#header h4 {
color: #FF0000;
font-size: 100%;
margin-bottom: 10px;
}
#homelink {
float: left;
width: 64px;
height: 20px;
background-image: url(../Images/home.gif);
background-repeat: no-repeat;
margin-top: 7px;
font-size: 1px;
color: #428afc;
}
#articlelink {
float: right;
width: 64px;
height: 20px;
background-image: url(../Images/articles.gif);
background-repeat: no-repeat;
font-size: 1px;
color: #3c8ffc;
}
h3 {
text-align: center;
color: #FF0000;
line-height: 30px;
font-size: 130%;
}
.col {
float: left;
width: 100%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.col a {
margin-left: 5px;
line-height: 1.5ex
}
.col dt {
padding-top: 3px;
}
.col dd {
padding: 2px 5px 2px 20px;
}
.col b {
display: block;
padding: 2px 5px 2px 20px;
}
.col { /* 1 column - left column */
float: left;
width: 100%;
border: 1px solid darkblue;
text-align: left;
margin-bottom: 5px;
}
.leftcol { /* 2 column - left column */
float: left;
width: 49.5%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.rightcol { /* 2 column - right column */
float: right;
width: 49.5%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.coll { /* 2 column - column left 80% */
float: left;
width: 79.5%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.coll a, .rcol a { /* 2 columns 80-20 */
margin-left: 5px;
line-height: 1.5ex
}
.coll dt, .rcol dt { /* 2 columns 80-20 */
padding-top: 3px;
}
.coll dd, .rcol dd { /* 2 columns 80-20 */
padding: 2px 5px 2px 20px;
}
.lecol { /* 3 column - left column 40% */
float: left;
width: 39.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
margin: 0;
}
.mdcol { /* 3 column - middle column 40% */
float: left;
width: 39.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}padding: 0;

.rcol { /* 3 column - right column 20% */
float: right;
width: 19.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.lfcol { /* 3-equal column - left column */
float: left;
width: 32.8%;
margin-bottom: 5px;
}
.micol { /* 3-equal column - middle column */
float: left;
width: 32.8%;
margin-bottom: 5px;
}
.ricol { /* 3-equal column - right column */
float: right;
width: 32.8%;
margin-bottom: 5px;
}
.lcol a, .mcol a, .rcol a { /* 3 columns */
margin-left: 5px;
line-height: 1.5ex
}
.lecol a, .mdcol a, .rcol a { /* 3 columns 40-40-20 */
margin-left: 5px;
line-height: 1.5ex
}
.lecol b, .mdcol b, .rcol b { /* 3 columns 40-40-20 */
display: block;
padding: 2px 5px 2px 20px;
}
.lecol dt, .mdcol dt, .rcol dt { /* 3 columns 40-40-20 */
padding-top: 3px;
}
.lecol dd, .mdcol dd, .rcol dd { /* 3 columns 40-40-20 */
padding: 2px 5px 2px 20px;
}
.lcol dt, .mcol dt, .rcol dt { /* 3 columns */
padding-top: 3px;
}
.lcol dd, .mcol dd, .rcol dd { /* 3 columns */
padding: 2px 5px 2px 20px;
}
.lcol b, .mcol b, .rcol b { /* 3 columns */
display: block;
padding: 2px 5px 2px 20px;
}
.ltcol { /* 4 column - left column */
float: left;
width: 24.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.lmdcol { /* 4 column - left mid column */
float: left;
width: 24.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.rmdcol { /* 4 column - right mid column */
float: left;
width: 24.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.ritcol { /* 4 column - right column */
float: right;
width: 24.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.ltcol a, .lmdcol a, .rmdcol a, .ritcol a { /* 4 column - all column */
margin-left: 5px;
line-height: 1.5ex
}
.lftcol { /* 5 column - left column */
float: left;
width: 20.2%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.midlftcol { /* 5 column - middle left column */
float: left;
width: 19.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.midcol { /* 5 column - middle column */
float: left;
width: 19.0%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.midrtcol { /* 5 column - middle right column */
float: left;
width: 20.1%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.rtcol { /* 5 column - right column */
float: right;
width: 19.7%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.lftcol a, .midlftcol a, .midcol a, .midrtcol a, .rtcol a { /* 5 column - */
margin-left: 5px;
line-height: 1.5ex
}
.lftcol dt, .midlftcol dt, .midcol dt, .midrtcol dt, .rtcol dt { /* 5 column - */
padding-top: 3px;
}
.lftcol dd, .midlftcol dd, .midcol dd, .midrtcol dd, .rtcol dd { /* 5 column - */
padding: 2px 5px 2px 20px;
}
.lftcol b, .midlftcol b, .midcol b, .midrtcol b, .rtcol b { /* 5 column - */
display: block;
padding: 2px 5px 2px 20px;
}
.rightcol { /* 2 column - right column */
float: right;
width: 49.5%;
border: 1px solid darkblue;
margin-bottom: 5px;
}
.leftcol a, .rightcol a {
margin-left: 5px;
line-height: 1.5ex
}
.leftcol dt, .rightcol dt {
padding-top: 3px;
}
.leftcol dd, .rightcol dd {
padding: 2px 5px 2px 20px;
}
.leftcol b, .rightcol b {
display: block;
padding: 2px 5px 2px 20px;
}

.clear{clear:both;height:30px;}