1.) If I add padding to the <div>, then I believe that causes the <div> to expand and become wider, right?

Not necessarily. If the <div>'s parent element has a fixed width then your child div will retain it's current width (assuming it's set to 100%) and the content will be pushed inwards by the padding amount

The easiest, imo, way to learn is to set up a simple html/css test and play with the styles and see what effect they have.

1.) If I add padding to the <div>, then I believe that causes the <div> to expand and become wider, right?

As webdev said, maybe. If it has a set width, then yes. But if it has no set width, then no.

2.) If I add padding (or margins) to the <p> then I believe that it "squishes" the <p> inside of the <div>, [b]but the <div>'s width is unaffected, right?

Yes, as long as no width is set on the <p>. If a width is set on the p (which it shouldn't be, in most cases) then, like a div with a set width, the padding/margin will be added to the overall width of the p.

My layout has 3 columns which are floats and position: relative. The Left and Right Columns are 200px. The Middle column has width: 100% and uses a -400px right-margin.

In the Left and Right Columns I want to add "boxes" that contain various things. (In the simplest of terms, think of how your SitePoint profile looks with its "My Messages", "My Subscriptions" and "My Settings".)

So, when I looked at my old code, I realized there are several ways to get the end effect I want, but then I was unsure of the "correct" technical way to do things?!

Anyways, my goal is to just create a CSS "box" with content inside that is written the most logical way and that scales the best as seen in my other thread:Seeking Polymorphic CSS Class?!

Because a "box" may not always be constrained by a fixed-width Left Margin, I am thinking I should add the Padding to the <p>'s and do whatever is needed to keep the <div class=box"> at a predictable fixed width.

You have two sets of styles for .box there, which is a bit confusing. To keep the content of .box away from the sides of the column it's in, just give it some padding but no width. It you want a border around it too, then perhaps add a border and margins as well.

You have two sets of styles for .box there, which is a bit confusing. To keep the content of .box away from the sides of the column it's in, just give it some padding but no width. It you want a border around it too, then perhaps add a border and margins as well.

There is no "best" way, so it's up to your very own preference and how you've set up your HTML.

Adding padding to your p will not affect the width of the container (div) unless you set a width on your p that is equal to the width of its container, so you didn't have that wrong. So, if your container is 200px wide and you set padding to your p (without specifying a width on your p) then the container remains 200px wide.

I find it more convenient to set padding on the layout container itself (div) instead of applying padding to various elements. I declare padding on a reusable div container once and be done with it. However, this is just my personal preference and is in no way superior or inferior to other methods. You could as well set padding to all elements. I prefer having all containers on my site to have the same padding and margins, which is why I set it on a generic layout div that will then be used for all content blocks that need a div container.

Without risking to confuse any more there is one point I would like to clarify and that is that the default width for block boxes (not absolutely positioned elements or floats) is actually width:auto and not width:100%.

That means you can add padding and borders to the element without increasing its overall dimensions. The width auto effectively means the usable width of the element is reduced by the padding or borders that you add. If the element was width:100% then adding padding and borders would make the element's overall dimensions larger and in most cases would not fit in the space allocated for it.

If your outer div is 200px width then you can add padding, margins and borders to the inner p element and it will still fit inside that parent div because the p element's width is auto and adjusts to fill the available space. If you add padding or borders to the parent div then that would increase the overall dimension of that parent div due to the fixed width.

There is no "best" way, so it's up to your very own preference and how you've set up your HTML.

Adding padding to your p will not affect the width of the container (div) unless you set a width on your p that is equal to the width of its container, so you didn't have that wrong. So, if your container is 200px wide and you set padding to your p (without specifying a width on your p) then the container remains 200px wide.

I find it more convenient to set padding on the layout container itself (div) instead of applying padding to various elements. I declare padding on a reusable div container once and be done with it. However, this is just my personal preference and is in no way superior or inferior to other methods. You could as well set padding to all elements. I prefer having all containers on my site to have the same padding and margins, which is why I set it on a generic layout div that will then be used for all content blocks that need a div container.

I am sorta leaning both ways. Here is my thinking...

Setting Top/Bottom Padding for <p> seems to make sense, because you may want to adjust that for all copy on your site. However, setting Left/Right Padding on <p> seems problematic, because you may not always want a "gutter".

So for that, I would say that you would apply Left/Right Padding to "boxes". You could do the same for Top/Bottom, except then that has a multiplying effect with any Top/Bottom Padding you add to your <p>'s.)

The only downside to adding Left/Right (or Top/Bottom) Padding to a <div> is that is expands the <div>'s original size...

Without risking to confuse any more there is one point I would like to clarify and that is that the default width for block boxes (not absolutely positioned elements or floats) is actually width:auto and not width:100%.

That means you can add padding and borders to the element without increasing its overall dimensions. The width auto effectively means the usable width of the element is reduced by the padding or borders that you add. If the element was width:100% then adding padding and borders would make the element's overall dimensions larger and in most cases would not fit in the space allocated for it.

The purpose - in my mind - of #pageLeftCol, #pageMidCol_3, and #pageRightCol are that they serve as "containers" and nothing more. (They should not change their size, because my entire page structure builds off of them!)

I would like to add "boxes" inside of the Left Column.

A generic "box" would look like this...

.box{
width: auto;
border: 1px solid #AAA;
}

So, based on my understanding of what you said above, adding a 1px border would not affect my Left Column's width of 200px, right?

If your outer div is 200px width then you can add padding, margins and borders to the inner p element and it will still fit inside that parent div because the p element's width is auto and adjusts to fill the available space. If you add padding or borders to the parent div then that would increase the overall dimension of that parent div due to the fixed width.

But if I have "boxes" inside of the Left Column, and like the <p> they have width: auto, then the parent Left Column should remain unaffected, right?

If you have a parent container with a width of 200px and an inner container with a width set to auto (default, if no width is set), then margins, paddings, and borders do not affect the parent container.