DIV with Padding

**DoubleDee** · Feb 25, 2012 16:33

If I have the following DIV...

Code CSS:

#boxComments{
	max-width: 640px;
	margin: 0 auto;
	margin: 40px auto;
	padding: 0 20px 60px 20px;
	border: 1px solid #333;
}

Does the Left & Right Padding inside the DIV expand the total Width of the DIV, or does it stay fixed at 640px?

My understanding of the Box Model is that Padding does not change the Width of a Fixed-Width DIV unless there is another Fixed-Width DIV inside the first, in which case the Padding could make the Outside DIV wider.

How do things really work?!

Thanks,

Debbie

**RyanReese** · Feb 25, 2012 16:36

Couldn't you just test this yourself?

If you give it more padding and you see it doesn't expand it beyond 640 px, you know that it's staying at 640px with compensation for the margins/paddings/borders.

If it goes beyond 640px with an increase in padding, you have the other answer. You'll see how things "really work?!" if you just go run some tests which take like 30 seconds.

**DoubleDee** · Feb 25, 2012 16:40

Originally Posted by RyanReese

Couldn't you just test this yourself?

If you give it more padding and you see it doesn't expand it beyond 640 px, you know that it's staying at 640px with compensation for the margins/paddings/borders.

If it goes beyond 640px with an increase in padding, you have the other answer. You'll see how things "really work?!" if you just go run some tests which take like 30 seconds.

Who says I didn't test things?!

Apparently I'm not certain based on my test.

Debbie

**RyanReese** · Feb 25, 2012 17:03

I'll leave you with this little hint even though you don't deserve it.

If you add max-width:800px and padding:0 100px; together, you get 1000px element width.

This was my test.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<style type="text/css">
  div
{background:blue;
max-width:800px;margin:0 auto;height:300px;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>

I then added in "padding:0 100px"

IF THE BOX GETS BIGGER. IT ADDS.

I couldn't help myself, that was really my last

. You're the one not going to benefit from putting me on the ignore list. I know what I'm talking about, most of the time.

**kohoutek** · Feb 25, 2012 18:33

Not only padding expands the total width in your example, but the border as well by two pixels.

**Rayzur** · Feb 25, 2012 20:00

Originally Posted by DoubleDee

My understanding of the Box Model is thatPadding does not change the Width of a Fixed-Width DIV unless there is another Fixed-Width DIV inside the first, in which case the Padding could make the Outside DIV wider.

How do things really work?!

Hi Debbie,

A nested div has nothing to do with the way padding behaves. Padding is always applied to the INSIDE of the element while margin is applied to the OUTSIDE.

They both play a role in the box model as they add to the total space the element takes up.

Have a look through The CSS Box Model once again.

**DoubleDee** · Feb 26, 2012 00:05

Originally Posted by Rayzur

Hi Debbie,

A nested div has nothing to do with the way padding behaves. Padding is always applied to the INSIDE of the element while margin is applied to the OUTSIDE.

They both play a role in the box model as they add to the total space the element takes up.

Have a look through The CSS Box Model once again.

Let me try again to explain what is going on. (I tried earlier, but RyanReese felt it necessary to insult me and act like an ass, so I never had a chance. And that's why he is on my Ignore List. I don't know what gets into people...)

My User Comments are contained in #boxComments. Inside that box, for each Comment/Post is this code...

HTML Code:

	<div class="post">
		<div class="commenter">
			<a href="<?php //echo BASE_URL ?>profile.php">DoubleDee</a>
			<img class="noborder" src="/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100"
					alt="Picture: Postage Meter.  Credit: John Doe, Wikimedia Commons." />
		</div>

		<div class="comment2">
			<p class="commentDate">8:38pm on July 10, 2011</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat congue urna, a semper est sollicitudin eget.</p>
		</div>
	</div>

When I hovered over #boxComments in NetBeans/FireBug I saw Computed Box Model = 640px

But when if I switched to the Layout tab, I saw the center box is 640x405 and then surrounded by 20px of padding and 1px of border. So that implies my actual width should be 682px?! So which one is right?! Those two tabs seem to contradict each other...

I *thought* Paul O had taught me in the past that if you have a DIV with a fixed-width assigned to it, then any Padding just pushes inwards and does NOT expand the DIV outwards, because, after-all the Width is fixed.

By contrast, I *thought* that if you had an inside DIV (e.g. B) with a fixed-width (e.g. 200px) and then you had a parent DIV (e.g. A) with now fixed-width, then as you add Padding to that outside DIV, the outside DIV would grow...

Hope that makes better sense?!

And, YES, I have been doing lots of testing and reading, however FireBug is throwing me off and what it says things are seem off.

Thanks,

Debbie

**Rayzur** · Feb 26, 2012 00:26

But when if I switched to the Layout tab, I saw the center box is 640x405 and then surrounded by 20px of padding and 1px of border. So that implies my actual width should be 682px?! So which one is right?! Those two tabs seem to contradict each other...

According to the css in your first post, yes 682px is the total space occupied by #boxComments

From what I could see Ryan had just started out by asking you a simple question as to whether or not you had tested it yourself. From there it has needlessly escalated into name calling. Most of us around here that help others learned by testing and reading through the specs so don't take offense when you are asked if you have run some tests. It doesn't always imply that it is being said in a smart tone.

**DoubleDee** · Feb 26, 2012 00:53

Originally Posted by Rayzur

According to the css in your first post, yes 682px is the total space occupied by #boxComments

If I select #boxComments, then Computed Box Model Width is 640px and I assume that is the box with the border since that is what is highlighted. If I click on the Layout tab, then visually it appears that the same highlighted box would be 682px?!

And how am I to really know what the width is? How else could I measure it? And I have two FireBug tabs telling me two different numbers.

See screenshots...
LayoutTab.png
ComputedTab.png

From what I could see Ryan had just started out by asking you a simple question as to whether or not you had tested it yourself. From there it has needlessly escalated into name calling. Most of us around here that help others learned by testing and reading through the specs so don't take offense when you are asked if you have run some tests. It doesn't always imply that it is being said in a smart tone.

Coming from you, I wouldn't take "Did you test it?" as an insult, because you treat me with respect.

However, considering that I spent most of my afternoon Testing, and Reading, and Trouble-Shooting in FireBug, I didn't appreciate some 20-year kid talking to me like I am an idiot, lazy, and/or a child!! (I've seen Ryan do this lots to others. He needs to deflate his ego...)

You're world-class, Rayzur. And I appreciate all of your help over the past year or so.

Debbie

**Rayzur** · Feb 26, 2012 01:32

Originally Posted by DoubleDee

If I select #boxComments, then Computed Box Model Width is 640px and I assume that is the box with the border since that is what is highlighted. If I click on the Layout tab, then visually it appears that the same highlighted box would be 682px?!

And how am I to really know what the width is? How else could I measure it? And I have two FireBug tabs telling me two different numbers.

The layout tab gives the correct oa width of the box model. I'm usually always in the style tab anyway so I don't pay much attention to the other tabs.

If you will read through the box model link I provided earlier, scroll down to the "Implementing the Box Model" sub heading and you will find a very simple explanation of all properties that effect the box model.

That's CSS: 101, it's the first thing people need to learn and one of the reasons it is the very first item in the CSS Reference (box properties).

**DoubleDee** · Feb 26, 2012 01:40

Originally Posted by Rayzur

The layout tab gives the correct oa width of the box model. I'm usually always in the style tab anyway so I don't pay much attention to the other tabs.

If you will read through the box model link I provided earlier, scroll down to the "Implementing the Box Model" sub heading and you will find a very simple explanation of all properties that effect the box model.

That's CSS: 101, it's the first thing people need to learn and one of the reasons it is the very first item in the CSS Reference (box properties).

I'll re-read that link in the morning when I am fresh.

Thanks,

Debbie

**dresden_phoenix** · Feb 26, 2012 02:48

Well it's nice to see the everyone is playing nice.
Anyway, it was a good curious question ( I think that's what Ryan originally meant by testing,btw.. do it and see how it works.. am sure no offense was meant by anyone.. originally).

So the thing to keep in mind is, for all calculating purposes: max/min width define width just as width does. imagine whats going on is each time you widen or shrink the window the browser checks it and then setx the appropriate value.. OR better yet... imagine what you have done , in a sense width:100% (as long as 100% width is <= 800px) . and thusly to THAT add padding and border widths.

**Paul O'B** · Feb 26, 2012 08:52

Originally Posted by DoubleDee

When I hovered over #boxComments in NetBeans/FireBug I saw Computed Box Model = 640px

But when if I switched to the Layout tab, I saw the center box is 640x405 and then surrounded by 20px of padding and 1px of border. So that implies my actual width should be 682px?! So which one is right?! Those two tabs seem to contradict each other...

[/QUOTE]

There is no contradiction there. The (css property) "width" is 640px. The padding and borders are outside the width and add to the total size of the element. ("width" refers to the css property "width" and not a general width of an element.)

The width of an element is simply whatever you have defined "width" to be (assuming you are not using an auto width container). Any padding and borders should be added to this width to find the whole space that the element takes up on the page.

Off Topic:

Please do not resort to name calling as Ryan was only trying to help by suggesting testing yourself first and you could have easily replied saying you had done that but didn't understand the results rather than teh whole thing escalating into a public argument.

**DoubleDee** · Feb 26, 2012 13:19

There is no contradiction there. The (css property) "width" is 640px. The padding and borders are outside the width and add to the total size of the element. ("width" refers to the css property "width" and not a general width of an element.)

The width of an element is simply whatever you have defined "width" to be (assuming you are not using an auto width container). Any padding and borders should be added to this width to find the whole space that the element takes up on the page.[/QUOTE]

So "width" is the size of the containing block around my Text, but not the "Total Width" which would be Text+Padding+Border+Margin, right?

I still think the results that FireBug shows look deceptive...

Who came up with these names???

When I select #boxComments and it is highlighted and the Computed Tab says the Width=640px I assume that is the highlighted blue line that I see. But in reality FireBug is showing me the Total Width highlighted and calling it "Width". (That is stupid!!)

In the Layout Tab, what I see highlighted in blue says is STILL confusing because from a good UI Design standpoint there should be something in the Box Model Diagram that screams "The Blue Box you see equals a Total Width of 682px" but at least I can sorta figure that out looking at the diagram. (That is still stupid!!)

I think I get what FireBug is *trying* to show me, but it is confusing as hell!!!

Debbie

**Paul O'B** · Feb 26, 2012 14:51

Originally Posted by DoubleDee

So "width" is the size of the containing block around my Text, but not the "Total Width" which would be Text+Padding+Border+Margin, right?

The "Containing block" is actually a more involved concept which I won't start to confuse you with but yes the total space an element will take up on the page is its width + padding + borders (+ margins if you need to know exactly how much space to allow). If an element does not have a width specified then for a static element it will fill all the space available even if you have padding and borders on that element.

[/quote]
I still think the results that FireBug shows look deceptive...

When I select #boxComments and it is highlighted and the Computed Tab says the Width=640px I assume that is the highlighted blue line that I see. But in reality FireBug is showing me the Total Width highlighted and calling it "Width". (That is stupid!!)

[quote]

No I think you are missing the point I made earlier.

When you highlighted boxComments the computed tab in Firefox will tell you what the values are for all the CSS property values. It doesn't have anything to do with how much space the element occupies as you will have to work that out yourself by looking at the computed values for width + padding + borders (or looking at the layout tab where it is shown graphically).

It can be confusing at first I agree but the idea is that if you give a div a width of 100px then you can put something inside it that is 100px wide. You could not do this if padding and borders were on the inside as in the old broken box model. In css3 you can actually change the box models so there are benefits to both approaches.

**dresden_phoenix** · Feb 26, 2012 17:42

repeating myself:

Tthe thing to keep in mind is, for all calculating purposes: max/min width define width just as width does. imagine whats going on is each time you widen or shrink the window the browser checks it and then sets the appropriate value.. OR better yet... imagine what you have done , in a sense set width:100%

... with that max limit applied.

The box model ADDS PADDING and BORDERS widths to the CALCULATED SIZE of the element anytime there is a given WIDTH involved. padding.

The ONLY time padding or border is NOT ADDED to the CALCULATED width of an element is when no width, min-width or max-width have been set.

So lets say you had the following:

.example1{ padding:10px; border 5px;}
.example2{ width:150px; padding:10px; border 5px;}
.example3{ width:100%; padding:10px; border 5px;}
.example3{ max-width:250px; padding:10px; border 5px;}

the CALCULATED (total) size of the element would be:
.example1: the size of the container.
.example2:180px =150+10+10+5+5
.example3 the:the width of the container + 30px;
.example3: the:the width of the container + 30px, up to 280px.

The key point is there is WIDTH and CALCULATED width... which you have to take into account

User Tag List

Thread: DIV with Padding

Thread Tools

Display

DIV with Padding

Bookmarks

Bookmarks

Posting Permissions