CSS - Spacing areas within a wrapper

HTML & CSS
1

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?


#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

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! :slight_smile:

3

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

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

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.


<!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.