Quote:
Originally Posted by cjohnson11
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?.
|
Any block-level element will work fine for this, but a <div> is probably the most appropriate. By default, block-level elements take up 100% width relative to their parent element. In order to get them to sit side-by-side you will need to set a width less than 100%
and also use a float setting. The float is what makes the magic happen.
Take a look at this sample:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Sample</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{width:842px;margin:100px auto 0px;overflow:auto;}
.box{float:left;width:280px;background-color:#505050;border-left:1px solid #fff;padding:20px 0px;}
.box:first-child{border-left:0 none;}
h1{line-height:60px;text-align:center;font-weight:bold;color:#fff;font-family:helvetica;font-size:30px;}
p{width:80%;margin:0 auto;font-family:'trebuchet ms';font-size:15px;color:#fff;text-align:justify;}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h1>Box #1</h1>
<p>A whole bunch of content could go here...</p>
</div>
<div class="box">
<h1>Box #2</h1>
<p>A whole bunch of content could go here...</p>
</div>
<div class="box">
<h1>Box #3</h1>
<p>A whole bunch of content could go here...</p>
</div>
</div>
</body>
</html>
Before you post, read our: 
