What is the html code to make horizontal boxes

rajesh0592 · 10-28-2012, 05:06 AM

What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <a href="http://www.carinsurancequotesinformation.com">car insurance quotes</a> where the boxes are next to each other, and will this affect the page width on my site.
Someone told me use DIV tags but how do i put this in HTML code?.

Excavator · 10-28-2012, 02:36 PM

Hello rajesh0592,
Placing boxes horizontally is easy with floats.

Set a width on a containing element, then set widths on the boxes you want placed beside each other and float them left.

Of course, you'll run into the usual problem of clearing floats so I'll answer that now.

A quick example:

Code:

<!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">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;	
	padding: 200px 0 300px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
.box {
	height: 180px;
	width: 180px;
	margin: 10px;
	float: left;
	background: #f00;
}
</style>
</head>
<body>
    <div id="container">
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    	<div class="box"></div>
    <!--end container--></div>
</body>
</html>