SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    CSS - Spacing areas within a wrapper

    If I have a #wrapper that takes up 95% of the page, no matter the size, and two areas within it, #nav that should take up 25% of #wrapper's left side and #content to take up the right 75%, how do I go about doing so?

    This just doesn't seem to work. If I make #Content any larger than 70%, it puts it at the bottom under #Wrapper.

    I can change content to 74% an it fits with only a sliver of spacing left between it and #nav, but 75% really messes it up.

    Would I be better just making everything fixed?

    Code CSS:
    #wrapper {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    background: #ccc;
    }
    #content {
    width: 70%;
    float: right;
    margin: 0 auto;
    text-align: center;
    background: #eee;
    }
    #content h3 {
    text-decoration: underline;
    }
    #nav {
    width: 25%;
    float: left;
    border-right: solid 1px black;
    text-align: center;
    }
    #nav div {
    display: inline-block;
    text-align: left;
    }
    #nav h3, #nav ul {
    margin-bottom: 1em;
    }
    #nav h3 {
    text-decoration: underline;
    }
    #nav li {
    list-style: none;
    }

  2. #2
    SitePoint Enthusiast PenguinsRock's Avatar
    Join Date
    Apr 2010
    Location
    Scotland, UK
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It's not the % of your #content or #nav that's the problem - it's the border-right: solid 1px black; on your #nav that is.

    Remember that the box model means that border-width is added to the normal width value to give the total width, so what you're effectively saying above is that your #nav is 25% + 1px, and your #content is 75% which adds up to 100% + 1px, which is why your #content is being shoved down the bottom.

    If you take the border away, content is back where it should be.

    Hope this helps!

  3. #3
    SitePoint Zealot gregs's Avatar
    Join Date
    Aug 2002
    Posts
    161
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perhaps I will just do it as I have in the past. The page is only for my viewing. Set it all to a fixed width, that way I have FULL control over every pixel.

    Wrapper: 800 px;

    Nav: 149 px;

    Content: 650 px;

    Also, thank you for pointing out the little line. I knew it was in there, but had no clue it added another pixel line in that way.

  4. #4
    SitePoint Enthusiast PenguinsRock's Avatar
    Join Date
    Apr 2010
    Location
    Scotland, UK
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This article is a good read on CSS box models, if you want to find out more: http://www.w3schools.com/css/css_boxmodel.asp

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

    You can do it like this so that you only set the one width and the other just fills the space so there isn't an issue with border or padding.

    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #wrapper {
        width: 95%;
        margin: 0 auto;
        overflow: hidden;
        background: #ccc;
    }
    #content {
        width: 75%;
        float: right;
        margin: 0 auto;
        text-align: center;
        background: #eee;
    }
    #nav {
        border-right: solid 1px black;
        text-align: center;
        background:#ddd;
        overflow:hidden;
        min-height:0;/* haslayout IE7*/
    }
    * html #nav{zoom:1.0}/* havslayout IE6*/
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
        </div>
        <div id="nav">
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
        </div>
    </div>
    </body>
    </html>
    The overflow:hidden creates a rectangular box to the side of a float and will just fill what ever space is available. IE7 and under just need halslayout to create the same effect.


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
  •