Can't get boxes under columns

HTML & CSS
1

I have this page code, where it has a right column and a left column.
The right column has a top box and three column boxes under that. It all works well together.

I’m trying to add two colums 13 and 14 under the right column but they seem to be under the left column, instead of the right. Can you help me?

<div id="wrapit">

<div class="col_left">

<div id="box1">TEXT</div>

<div id="box2">TEXT</div>

<div id="box3">TEXT</div>

</div><!--div col_left>-->

<div class="topbox">TEXT</div>

<div class="col_a">TEXT</div>

<div class="col_b">TEXT</div>

<div class="col_c">TEXT</div>

<div class="col_13">TEXT</div>

<div class="col_14">TEXT</div>

</div><!--<wrapit>-->

wrapit {
		margin: 0px auto;
		padding: 0px 0px 10px 0px;
		width: 970px;
		background: #;
		border: 1px solid #;
		overflow: auto;
		}
		
		.col_left {
				float: left;
				width: 225px;
				height: 600px;
				margin: 28px 5px 0px 0px;
				padding: 0px 0px 0px 0px;
				background:url(../images/Q9.jpg);
				background-repeat: no-repeat;
				background: #;
				}
				
				#box1 p {
				width: 200px;
				  margin: 15px;
				  padding: 5px;
				  background-color: #;
				  border:1px solid #;
				} 
				
				#box2 p {
				width: 200px;
				  margin: 15px;
				  padding: 5px;
				  background-color: #;
				  border:1px solid #;
				} 
				
				#box3 p {
				width: 200px;
				  margin: 15px;
				  padding: 5px;
				  background-color: #;
				  border:1px solid #;
				} 
		
		
		.topbox {
		float: left;
		width: 690px;
		height: 40px;
		margin: 25px 0px 0px 20px;
		padding: 15px 10px 10px 10px;
		border: 1px solid #;
		background:url(../images/rBox.gif);
		background-repeat: no-repeat;
		background: #;
		}
		
		.col_a {
		float: left;
		width: 198px;
		height: 385px;
		font-size:1em;
		margin: 10px 5px 0px 20px;
		padding: 10px 12px 5px 16px;
		border: 1px solid #;
		background:url(../images/2box.gif);
		background-repeat: no-repeat;
		background: #;
		}
		
		.col_b {
		float: left;
		width: 198px;
		height: 485px;
		font-size:1em;
		margin: 10px 5px 0px 12px;
		padding: 20px 12px 5px 16px;
		border: 1px solid #;
		background:url(../images/2box.gif);
		background-repeat: no-repeat;
		background: #;
		}
		
		.col_c {
		float: left;
		width: 198px;
		height: 485px;
		font-size:1em;
		margin: 10px 0px 0px 12px;
		padding: 20px 12px 5px 16px;
		background:url(../images/2box.gif);
		background-repeat: no-repeat;
		border: 1px solid #;
		background: #;
		}		



		.col_13 {
		float: left;
		width: 330px;
		height: 105px;
		margin: 10px 0px 0px 20px;
		padding: 20px 5px 5px 15px;
		border: 1px solid #ccc;
		background: #;
		}
		
		.col_14 {
		float: left;
		width: 330px;
		height: 105px;
		margin: 10px 0px 0px 8px;
		padding: 20px 5px 5px 15px;
		border: 1px solid #ccc;
		background: #;
		}
2

You need to create a block formatting context for the right column. Else, as soon as possible, things will wrap under the left column.
simply wrap the right column in a div, and give the div’s style {overflow: hidden;}.

cheers,

gary

3

Gary is right. This way it will never work. You could do with less CSS as well. There are quite some rules repeated in your stylesheet which you could combine:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
wrapit {
	width: 970px;
	margin: 0px auto;
	padding: 28px 0px 10px 0px;
	background: #;
	border: 1px solid #;
	color: #FFF;
}
		
.content {
	width: 225px;
	height: 600px;
	float: left;
	background:url(../images/Q9.jpg) no-repeat;
}

.right {
	width: 714px;
	margin-left: 20px;
	dispay: inline;	
}
				
.box {
	width: 200px;
	margin: 15px;
	padding: 5px;
	border:1px solid #000;
} 

.topbox {
	height: 40px;
	padding: 15px 10px 10px 10px;
	border: 1px solid #000;
	background:url(../images/rBox.gif) no-repeat #FF0000;
		
}
		
.col {
	width: 198px;
	height: 385px;
	margin: 10px 18px 0 0;
	padding: 10px 12px 5px 16px;
	float: left;
	display: inline;
	font-size:1em;
	border: 1px solid #;
	background:url(../images/2box.gif) no-repeat;
	background: green;
}
		
.b,
.c {
	height: 485px;
	background: yellow;
}

.c {
	margin-right: 0;
	background: blue;
}

.col_13,
.col_14 {
	width: 330px;
	height: 105px;	
	float: left;
	margin: 10px 8px 0 0;
	padding: 20px 5px 5px 15px;
	border: 1px solid #ccc;
	background: #;
}
		
.col_14 {
	margin-right: 0;
}
</style>
</head>

<body>
<div id="wrapit">

<div class="content">

<div class="box">TEXT</div>

<div class="box">TEXT</div>

<div class="box">TEXT</div>

</div><!--div col_left>-->

<div class="content right">

<div class="topbox">TEXT A</div>

<div class="col">Column Left</div>

<div class="col b">Column Middle</div>

<div class="col c">Column Right</div>

<div class="col_13">TEXT</div>

<div class="col_14">TEXT</div>

</div>

</div><!--<wrapit>-->
</body>
</html>