SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to do side by side divs

    I know there was a question similar to this one a few posts back, but I'm using text and not images. I need to place two divs side by side. If the maximum width they have to take up is 600px, I would think I could do float:left for both of them then do width: 292px with a padding of 8px on the left of the left div and 8px on the right div. Why doesn't this work? If you add them all up it equals 600px? The right div extends past the 600 px by about 6 px.

    What would be the best way to do this?
    John Saunders

  2. #2
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    208
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try changing the second div to float: right;

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Are you applying padding to one side and not all around?

    This should be quite straight forward
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {
    width:600px;
    height:300px;
    background:#ffffcc;
    }
    #float1, #float2 {
    width:292px;
    padding-left:8px;
    background:red;
    float:left;
    }
    #float2 {background:green}
    /* or like this */
    #outer2 {
    width:584px;
    height:300px;
    background:#ffffcc;
    padding:8px;
    }
    #float3, #float4 {
    width:292px;
    background:red;
    float:left;
    }
    #float4 {background:green}
     
    </style>
    </head>
    <body>
    <div id="outer"> 
    <div id="float1">Float1</div>
    <div id="float2">Float2</div>
    <div style="clear:both"></div>
    </div>
    <br />
    <div id="outer2"> 
    <div id="float3">Float1</div>
    <div id="float4">Float2</div>
    <div style="clear:both"></div>
    </div>
    </body>
    </html>
    Paul


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
  •