What might be the html code??

Discussion in 'Website Development & Design' started by tsumanshrestha05, Nov 20, 2012.

  1. tsumanshrestha05

    tsumanshrestha05
    uix_expand uix_collapse
    New Member

    Joined:
    Nov 20, 2012
    Messages:
    6
    Likes Received:
    0
    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. Kev H

    Kev H
    uix_expand uix_collapse
    Member

    Joined:
    Aug 29, 2012
    Messages:
    40
    Likes Received:
    17
    Haven't looked at the page (and didn't test the below - but looks ok. If nothing else should give you some code to research)

    <div style="float:left; width: 80px; border:1px solid black; margin-right:5px;">Content 1 here</div>
    <div style="float:left; width: 80px; border:1px solid black; margin-right:5px;">Content 2 here</div>
    <div style="float:left; width: 80px; border:1px solid black; margin-right:5px;">Content 3 here</div>
    <div style="clear:both;"></div>
     
    • Like Like x 1
  3. abhirampathak3

    abhirampathak3
    uix_expand uix_collapse
    Member

    Joined:
    Nov 22, 2012
    Messages:
    101
    Likes Received:
    8
    Please use this code

    <style>

    .boxWrap{
    width: 800px;
    margin: 0 auto;
    }
    .box {
    width: 200px;
    float: left;
    }


    /* Clearfix */
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; }

    </style>

    <div class="boxWrap clearfix">

    <div class="box">
    Box 1
    </div>

    <div class="box">
    Box 2
    </div>

    <div class="box">
    Box 3
    </div>

    <div class="box">
    Box 4
    </div>

    </div>
     

Share This Page