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 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div layout in rows?

    Hope someone can show me how to set up divs to display like a row of tables

    What I am hoping to achieve is to have the exact coloured layout as in the pic in the link but to duplicate this same layout with a number of rows with a break for each row.

    In the example the second row with grey block layers to show what I want.

    http://discoversecretsfor.com/divrows.htm

    This must also be IE6 friendly

    Any suggestions

    Cheers

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    The following will produce rows of divs in the colours you have used.

    In this example all of the divs are the same size.

    If you need divs of different sizes you could set up classes block1, block2, etc.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='en'>
    <head>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
    <title>Rows of Divs</title>
    <style type="text/css">
    #container {
    width: 750px;
    margin: 0 auto;
    }
    div.block {
    width:230px;
    height:160px;
    margin:0 15px 15px 0;
    float:left;
    }
    div.pink { background-color:pink; }
    div.azure { background-color:azure; }
    div.yellow { background-color:yellow; }
    div.grey { background-color:#ccc; }
    div.dark { background-color:#999; }
    br {clear:both;}
    </style>
    </head>
    <body>
    <div id="container">
    <h1>Rows of Divs</h1>
    <div class="pink block"></div>
    <div class="azure block"></div>
    <div class="yellow block"></div>
    <br>
    <div class="grey block"></div>
    <div class="grey block"></div>
    <div class="dark block"></div>
    <br>
    </div>
    </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

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