Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What is the html code to make horizontal boxes

    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&quot;>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?.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •