Consider the next code:
#container { width:500px; } #inside { padding:10px; width:100%; } If I choose width:100%; will it be the same as stating "width 480:px" (that is, calculating the padding already) or will it be as "width:500px"
Thanks
Joel
Add a comment |
3 Answers
It will be like width:500px and adding the padding it will push the insides of overflow the #container..
But if #inside is a block element, then just giving the padding will make it behave as if it were width:480px
Example at http://www.jsfiddle.net/uA9LV/
answered Oct 13, 2010 at 17:58
Gabriele Petrioli
197k35 gold badges275 silver badges331 bronze badges
6 Comments
ChrisLively
Not exactly. It won't push the insides of the #container at all. Instead, #inside will end up outside of the container.
Gabriele Petrioli
@Chris, indeed ... it was a figure of speech, but not appropriate in this case.. edited :)
ChrisLively
BTW, I'm digging jsfiddle.net. Looks like a really nice way to present code.
Joel
So what is the rule? I thought leaving the width property blank results in "width:100%".
Gabriele Petrioli
@Joel, leaving it blank results to total width being 100%. Inclusive of borders and paddings.. so that is the way to go ..
|
It will be the same width as the parent container provided it's a block level element. So #inside will be 500px wide with 10px of padding on every side.
Comments
I put this in a sample document and the container div only resized 3 sides (left, top, and bottom).. and the inside div pushed it's boundaries outside of the container by 20px to the right.
I tested in IE8, Firefox 3.6.10, and the latest Chrome. Using various doctypes had no effect.
The code I used was:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled</title> <style> #container { width:500px; border: solid 1px blue; } #inside { padding:10px; width:100%; border: solid 1px red; } </style> </head> <body> <div id="container"> <div id="inside"> Hello World! </div> </div> </body> </html> Note: if you remove the Width declaration from the #inside div then you'll get exactly what you want. Which is an inner div that is 480px in width + 10px on each side for padding. See this link for more information on it: Solving the CSS Padding problem.
