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 3 of 3

Thread: DIV in HTML?

  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV in HTML?

    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
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    in the layouts i fixed header and footer using div tag.i want to know how to divide like left ,center,right in the container section using <div> tag.plz help me.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by cjohnson11 View Post
    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?.
    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>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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