SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: row of 3 divs

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    row of 3 divs

    hi all Im trying to get 3 divs in a row but just seem to keep running into errors not lining up etc. I though it would be pretty simple. I have attached an image to explain better. Hope someon can help.

    thanks in advance
    R
    Attached Images Attached Images

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there robvr6,

    here is the code for attached image....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        width:396px;
        padding:12px 0 12px 12px;
        border:1px solid #000;
        margin:auto;
     }
    #container:after {
        content:'';
        display:block;
        clear:both;
     }
    #left,#center,#right {
        width:110px;
        height:318px;
        padding:5px;
        margin-right:12px;
        background-color:#107531;
        font-family:sans-serif;
        font-size:0.8em;
        color:#fff;
        text-align:center;
        float:left;
        display:inline;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="left">div1</div>
    <div id="center">div2</div>
    <div id="right">div3</div>
    
    </div>
    
    </body>
    </html>
    coothead

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks very much coothead I think it was the display: inline property that I hadnt thought about. Much appreciated

    thanks again

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by robvr6
    display: inline property that I hadnt thought about.
    The display:inline is only in the code to fix the IE double margin bug (see faq on floats) and has nothing to do with the real solution. It's the float that lines the elements up horizontally.

    However IE6 (and under) has a double margin bug on floats that touch the sides of the parent and the margin is doubled in error on that side. The display:inline is a nonsensical fix that just happens to fix IE but does no damage to other browsers because it should be ignored by user agents when applied to floats.

  5. #5
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Paul O'B,

    best of both worlds again.

    You supply the explanations and I the code.

    coothead

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You supply the explanations and I the code
    Yes it splits the workload


Bookmarks

Posting Permissions

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