Columns And Why They Don't Work?

programming web dev
1

Okay I have a book on CSS and DHTML and most of the things it talks about work fine except for a few and one of the main things is Columns. I can’t seem to figure out what i’m doing wrong.

EDIT// http://www.versusmediagroup.com/talkingbook/
Link to what i’m working on.

This is my CSS Code:


/* CSS Document */

body, html {
	background-image:url(../includes/images/bg.gif);
	background-repeat:repeat-x;
	background-position:top;
	background-color:#000000;
	margin:0;
	padding:0;
	width:100%;
	min-width:779px;
	height:100%;
	min-height:461px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	overflow:auto;
}
#container {
	margin: 0 auto 0 auto;
	padding:0;
	width:779px;
	text-align:left;
	display:block;
}
#border{
	background-image:url(images/border_bg.gif);
	background-repeat:repeat-y;
	margin:0;
	padding:0 0px 0 9px;
	height:100%;
	width:726px
}


#header { 
	margin:0;
	padding:0;
	height: 101px;
	width:709px;
	background-color: #808a8c;
	background-image: url(../includes/images/header_up.gif);
	background-repeat: no-repeat;
}
hr {
	background-color: #666666;
}
/* Collums */
.section {
	margin:0;
	width:100%;
}
.col-A, .col-B {
	position:relative;
	float:left;
}
.col-A {
	display:block;
	float: left;
	margin: 0;
	padding: 0;
	width: 250px;
	z-index:10;
}
.col-B { 
	float:right;
	display:block;
	margin: 0 17px 0 0;
	padding: 0;
	width: 508px;
	height:100%;
	background-image:url(../includes/images/content_bg.gif);
	background-repeat:repeat-y;
	background-position: top left;
	z-index:20;
}
.clear{
	clear:both;
}
/* Navigation Area */

#nav-header{
	margin:1px 1px 1px 0;
	padding: 0;
	height: 27px;
	width:200px;
	background-color: #b80000;
	background-image: url(../includes/images/nav_header.gif);
	background-repeat: no-repeat;
}
#nav {
	margin:0;
	padding:0;
	height:100%;
	width:200px;
	background-color:;
	background-image:url(../includes/images/nav_bg.gif);
	background-repeat:repeat-y;
}

/* Content Area */

and my HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="includes/tbs_style.css">
<title>Talking Book Studios | Welcome</title>
</head>

<body>

<div id="container">

<div id="border">

<div id="header"></div>

<div class="section">

<div class="col-A">
	<div id="nav-header"></div>

	<div id="nav">
		<a href="#" title="About Us"><img src="includes/images/about_us.gif" title="About Us" border="0"></a>
		<a href="#" title="Equipment"><img src="includes/images/equipment.gif" title="Equipment" border="0"></a>
		<a href="#" title="Samples"><img src="includes/images/samples.gif" title="Samples" border="0"></a>
		<a href="#" title="Prices"><img src="includes/images/prices.gif" title="Prices" border="0"></a>
		<a href="#" title="Contact Us"><img src="includes/images/contact_us.gif" title="Contact Us" border="0"></a>
	</div>

</div>

<div class="col-B">
<div id="content">hfhfhfhfhhfhfhfhfhfhf</div>
</div>


<br class="clear" />

</div><!--Section-->

</div><!--Border-->

</div><!--Container-->

</body>
</html>

My problem is col-A is suposed to be on the left hand side and col-B on the right, which is working fine. However col-B is below col-A on the right side. It looks really bad.

If anyone knows this i would really like to know how to fix it.