I have a div that needs to be 100% wide, but I also need to add padding to the inside. This causes the div to expand beyond the viewport. Negative padding is not allowed, so I can't just offset the padding on the other end. I can't think of any other way to do this. Please help! 
The width of an item in CSS is set like this:
real width = width + padding + border.
So, you'll have to set the width to less than 100%, or it will obviously go above...
edit
You could, however, set a negative margin, perhaps:
<div style="width: 100%; padding: 10px; margin: 0 -10px 0 -10px;">foo</div>This is the one part of CSS that I don't like, because it is very agravating to have to calculate the widths like this. I think it should be
block width = margin + border + width
content width = block width - padding
Oh well. I'll never figure this stuff out...Pyro, your suggestion isn't working. I know it should, but it isn't, and I don't know why. Here's my code:
CSS:
...
#nav {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
margin: 0 -100px 0 0;
padding: 0 0 0 15px;
background-color: #88CC88;
border-width: 10px 0 2px 0;
border-color: #0F0F0F;
border-style: solid;
color: #F0F0F0;
font-size: 14px;
font-weight: normal;
}
#nav a {
color: #F0F0F0;
font-weight: normal;
font-size: 16px;
text-decoration: none;
background-color: #CC8888;
border-width: 1px 6px;
border-color: #0F0F0F;
border-style: solid double;
padding: 0px 10px;
margin: 0 5px;
cursor: pointer;
z-index: 10;
}
#nav a:hover, #nav a:active, #nav .current {
color: #0F0F0F;
background-color: #F0F0F0;
}
#nav a:active, #nav .current {
background-color: #8888CC;
}
...
XHTML:
...
<div id="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" class="current">p1</a>
+
<a href=http://www.webdeveloper.com/forum/archive/index.php/"p2.php">p2</a>
+
<a href=http://www.webdeveloper.com/forum/archive/index.php/"p3.php">p3</a>
</div>
...Ah, I see what you need.
Add margin: 0; and padding: 0; to the body styles, and then remove the width and margin from the #nav styles.Nice! Thanks a bunch, Pyro! It works perfectly!Happy to help. I've always been annoyed with the way the CSS box model works too. <!-- w --><a class="postlink" href="http://www.alistapart.com">www.alistapart.com</a><!-- w --> recomends the following way to get around this issue, and it's the way I frequently use:
<div id="parent">
<div id="child"> </div>
</div>
In CSS:
#parent {
/* Declare you width here, but no padding, borders or margins */
}
#child {
/* Add padding, borders and margins, but no width */
}
parent - Only the width is set here. You can set other CSS properties as long as they do not have to do with the box model.
child - Padding, margins, and borders are set here, but NO WIDTH. Unfloated block-level elements are by default as wide as they can be. If you specify padding, margins or borders, the browser will figure out the width for you.
It's kinda handy. Means less math for me
That's actually quite close to my suggestion above. I just used the body element, rather than creating a wrapper div.
The width of an item in CSS is set like this:real width = width + padding + border.
So, you'll have to set the width to less than 100%, or it will obviously go above...
edit
You could, however, set a negative margin, perhaps:
<div style="width: 100%; padding: 10px; margin: 0 -10px 0 -10px;">foo</div>This is the one part of CSS that I don't like, because it is very agravating to have to calculate the widths like this. I think it should be
block width = margin + border + width
content width = block width - padding
Oh well. I'll never figure this stuff out...
Pyro, your suggestion isn't working. I know it should, but it isn't, and I don't know why. Here's my code:CSS:
...
#nav {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
margin: 0 -100px 0 0;
padding: 0 0 0 15px;
background-color: #88CC88;
border-width: 10px 0 2px 0;
border-color: #0F0F0F;
border-style: solid;
color: #F0F0F0;
font-size: 14px;
font-weight: normal;
}
#nav a {
color: #F0F0F0;
font-weight: normal;
font-size: 16px;
text-decoration: none;
background-color: #CC8888;
border-width: 1px 6px;
border-color: #0F0F0F;
border-style: solid double;
padding: 0px 10px;
margin: 0 5px;
cursor: pointer;
z-index: 10;
}
#nav a:hover, #nav a:active, #nav .current {
color: #0F0F0F;
background-color: #F0F0F0;
}
#nav a:active, #nav .current {
background-color: #8888CC;
}
...
XHTML:
...
<div id="nav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" class="current">p1</a>
+
<a href=http://www.webdeveloper.com/forum/archive/index.php/"p2.php">p2</a>
+
<a href=http://www.webdeveloper.com/forum/archive/index.php/"p3.php">p3</a>
</div>
...Ah, I see what you need.
Add margin: 0; and padding: 0; to the body styles, and then remove the width and margin from the #nav styles.Nice! Thanks a bunch, Pyro! It works perfectly!
Happy to help. I've always been annoyed with the way the CSS box model works too. <!-- w --><a class="postlink" href="http://www.alistapart.com">www.alistapart.com</a><!-- w --> recomends the following way to get around this issue, and it's the way I frequently use:<div id="parent">
<div id="child"> </div>
</div>
In CSS:
#parent {
/* Declare you width here, but no padding, borders or margins */
}
#child {
/* Add padding, borders and margins, but no width */
}
parent - Only the width is set here. You can set other CSS properties as long as they do not have to do with the box model.
child - Padding, margins, and borders are set here, but NO WIDTH. Unfloated block-level elements are by default as wide as they can be. If you specify padding, margins or borders, the browser will figure out the width for you.
It's kinda handy. Means less math for me
That's actually quite close to my suggestion above. I just used the body element, rather than creating a wrapper div.