ansaurus

Question

CSS Padding and width

Answer 1

+1 A:

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/

Gaby 2010-10-13 17:58:22

Not exactly. It won't push the insides of the #container at all. Instead, #inside will end up outside of the container.

Chris Lively 2010-10-13 18:22:13

@Chris, indeed ... it was a figure of speech, but not appropriate in this case.. edited :)

Gaby 2010-10-13 18:23:50

BTW, I'm digging jsfiddle.net. Looks like a really nice way to present code.

Chris Lively 2010-10-13 18:24:40

So what is the rule? I thought leaving the width property blank results in "width:100%".

Joel 2010-10-13 18:25:20

@Chris, jsfiddle has become indispensable to me ..

Gaby 2010-10-13 18:26:00

@Joel, leaving it blank results to **total** width being 100%. Inclusive of borders and paddings.. so that is the way to go ..

Gaby 2010-10-13 18:27:40

I'm upvoting you for no other reason than the jsfiddle sample...well, that and you were the first one with a correct answer ;)

Chris Lively 2010-10-13 18:29:17

@Chris *chuckle* thanks mate.

Gaby 2010-10-13 18:36:49

Answer 2

A:

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.

jacobangel 2010-10-13 17:58:56

Answer 3

A:

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"&gt;
<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.

Chris Lively 2010-10-13 18:08:25

ansaurus

tags:

views:

answers:

CSS Padding and width

related questions