6 replies
  • WEB DESIGN
  • |
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?.
#html
  • Profile picture of the author The SEO
    OP try to insert the link to his website, via above post.
    {{ DiscussionBoard.errors[7518331].message }}
  • Profile picture of the author chrislim2888
    float left is the one you looking for. For example,
    <div style="float:left; width:100px; height:100px;">You content1</div>
    <div style="float:left; width:100px; height:100px;">You content2</div>
    <div style="float:left; width:100px; height:100px;">You content3</div>

    This will produce your wanted result.

    The other method will be using the TABLE.
    {{ DiscussionBoard.errors[7522493].message }}
  • Khushboo,

    The only HTML that would allow you to place boxes next to each other would be to use a table. Otherwise you will want to use CSS to position your elements next to one another. There are a variety of ways to do this such as with the float or margin properties but it will really depend on what you have doing on with the html.

    Here is a tutorial on CSS positioning,

    CSS Positioning

    Hope that helps,

    Shawn
    Signature
    Outsource to the experts...

    We customize your Blog, eBook, Press Release and Sale Copy content with your message.

    {{ DiscussionBoard.errors[7524563].message }}
  • Profile picture of the author max4web
    HTML stands for hyper text markup language it is the very basic & important language for creating web sites . there a various tag for formatting web pages on net. eg. <table> for creating table <h1> to <h6> for creating headings ,etc.
    Signature
    {{ DiscussionBoard.errors[7525622].message }}
    • Profile picture of the author The Black Hand
      In my last post, please remove the "http://warriorforum.com/" from the code I pasted if you use the code.
      For some reason, it keeps getting inserted into my post rather than show up as I pasted it.
      You can replace it with a "http://YOURSITE.com/" then the file name unless you are familiar with relative URLS (meaning you can leave that part out).
      That should clear things up!
      {{ DiscussionBoard.errors[7535015].message }}
  • Profile picture of the author The Black Hand
    Looking at the code of the site you mentioned...
    It looks like they used a table.
    See code below:
    <table width="750" height="187" cellspacing="0" cellpadding="3" align="center"><tbody>
    <tr>
    <td width="171" valign="top" background="images/auto_bg1.jpg" align="center" style="border:1px solid #ccc;">

    <td width="7">

    <td width="171" valign="top" background="images/home_bg.jpg" align="center" style="border:1px solid #ccc;">

    <td width="7">

    <td width="171" valign="top" background="images/life_bg.jpg" align="center" style="border:1px solid #ccc;">

    <td width="7">

    <td width="171" valign="top" background="images/motocycle_bg.jpg" align="center" style="border:1px solid #ccc;">
    </tr>
    </tbody>
    </table>

    So if you want to DUPLICATE their results exactly with different images, you can just change the image URLS, just make sure they are the exact same size.
    CSS is better, because tables are heavy (create large file sizes and slow load times).
    However, if you are unfamiliar with CSS it will probably drive you nuts to deal with the positioning issues that can happen, especially if the dimensions of the page are different from this example.
    Hope that helps!
    {{ DiscussionBoard.errors[7534994].message }}

Trending Topics