SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSSP spacing

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSSP spacing

    This stuff looks like a 90% wide box with two boxes beneath it, each occupying about half the available width.

    One problem is that the horizontal space between the two bottom boxes is less than the vertical space between the top box and the two bottom boxes. As you decrease the viewable area, the space between these boxes should decrease and they should all touch at the same time, but don't. It is as if the horizontal space of 1% represents the distance between the two lower boxes _not counting the border_.

    Also, if I add something desirable like .5em padding to the gray boxes, the width percentage calculations are wrong. How can I have some fixed padding within the boxes and keep the space between the boxes uniform?

    Hopefully it will be clear what effect I'm trying to achieve upon looking at the document. The vertical space between the box should be the same as the horizontal space, and some padding in the boxes would be nice.

    index.html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="a.css" type="text/css" />
    <title>test</title>
    </head>
    <body>
    <div id="top" class="box">
    blah blah
    </div>
    <div id="left" class="box">
    left box
    </div>
    <div id="right" class="box">
    right box
    </div>
    </body>
    </html>

    and a.css:
    body {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    }
    .box {
    background: #ddd;
    border: 1px dashed gray;
    }
    #top {
    margin-bottom: 1%;
    }
    #left {
    float: left;
    width: 50%;
    }
    #right {
    margin-left: 51%;
    }

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

    You have to remember that in the correct box model that padding and borders are added to the total width/height of an element.

    Therefore when you have a float of 50% and then you add a border to it of 1px your float becomes 50% +2px wide (1px on each side). This meansd the gap is 1% less 2px frm the other element which means it will disappear quicker than a 1% gap would when the window is resized.

    On the other hand the space between the top elements and bottom elements has been set at 1% and is therefore constant. It has been set as 1% from the element and not x% from the top (which includes the element). Your right element is 51% from the left which includes the left element which is 50%+2px as explained above.

    One solution is to put the padding and borders on an inner element so that the outer element stays at the specified width. This also has the benefit of avoiding the broken box model in IE5.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style>
    body {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    }
    .box {
    background: #ddd;
    border: 1px dashed gray;
    padding:2px;
    }
    #top {
    margin-bottom: 1%;
    }
    #left {
    float: left;
    width: 50%;
    }
    #right {
    margin-left: 51%;
    } 
     
    </style>
    
    </head>
    <body>
    <div id="top"> 
     <div class="box">
      blah blah
     </div>
    </div>
    <div id="left">
     <div class="box">
      left box
     </div>
    </div>
    <div id="right"> 
     <div class="box">
      right box
     </div>
    </div>
    </body>
    Hope that helps.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    greenwood
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks fantastic! Thanks so much.


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
  •