SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    boston, ma
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to add wanted space

    Hi Folks,

    My holding div (#divright) is 610px wide. I want #mainContent to be 560 px wide to allow for space between the text and the background border. When I try to adding padding or a margin, #divright gets pushed below #divleft.

    The html code with the text stripped out:

    <div id="wrapper">
    <div id="holder">

    <div id="divHeader">

    <div id="divlogo">
    </div>

    <div id="divrotating_images">
    </div>

    <div class="clearer"></div>

    </div><!-- close divHeader -->

    <div id="divContent">

    <div id="divleft">
    <div id="navholder">
    </div>

    <div id="address">
    </div>

    </div><!-- close divleft -->

    <div id="divright">

    <div id="pmmcrumb">
    </div>

    <img src="images/content-top.gif" alt="" width="610" height="43" />

    <div id="mainContent">
    </div>

    <img src="images/content-bottom.gif" alt="" width="610" height="40" border="0" />

    <div id="tagline">
    </div>

    <div id="footer">
    </div>

    </div><!-- close divright -->
    <div class="clearer"> </div>
    </div><!-- close divContent -->

    </div><!-- close holder -->
    </div><!-- close wrapper -->

    The relevant CSS code:

    /* ---------------------------- Positioning ---------------------------- */

    #wrapper /* Centering content */
    {
    width: 790px;
    text-align: center; /* for IE */
    margin: 0 auto;
    }

    #holder
    {
    text-align: left; /* compensate for IE hack */
    }

    /* ------------------------------- Divs ------------------------------- */
    #divskiplink {}

    #divHeader {
    padding: 0;
    }

    #divlogo {
    float:left;
    width:570px;
    }

    #divrotating_images {
    float:left;
    width:200px;
    }

    #divleft{
    padding: 0;
    float:left;
    width:180px;
    }

    #navholder {
    padding-top: 50px;
    z-index: 1000;
    }

    #address {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    z-index: 1000;
    }


    #divright {
    padding: 0;
    float: left;
    width: 610px;
    background-image:url(../images/content-bkgd.gif);
    background-repeat: repeat-y;
    background-color: #FFFFFF;
    }
    #pmmcrumb {
    background-color: #FFFFFF;
    margin-bottom: 0;
    }
    #mainContent {
    width: 560px;
    }


    #tagline {
    background-color: #FFFFFF;
    }
    #footer {
    background-color: #FFFFFF;
    }

    .clearer {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }

    Sincerely,
    VRM
    Last edited by vrmartin; Aug 10, 2006 at 19:22. Reason: page moved

  2. #2
    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)
    Hi,

    How much padding do you want ?

    If divright is 610px wide and maincontent is 560px wide then the maximum padding you can add will be 25px ether side:

    e.g.

    560 +25px padding each side = 560 + 25 + 25 = 610px

    Code:
    #mainContent {
    width: 560px;
    padding:25px;
    }
    If you then add borders to that then it will be too big and IE will drop it to find room underneath because it will stretch the parent wider to accomodate the greater content.

    If you want more padding than 25px each side then reduce the width accordingly so that you never exceed the total of 610px. In the correct box model padding and borders area dded to an elements width to preserve the width at the size specified.

    In ie5 and ie5.5 (and ie6 in quirks mode) padding and borders are placed inside the specified width an therefore the element doesn't get any bigger because the usable width diminishes.

    Is that what you meant ?

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    boston, ma
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Now it works

    Hi Paul,

    Thanks. I had tried that originally, but must had added an extra digit in the padding. In CSS spelling counts.

    Sincerely,
    VRM


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
  •