Strange Layout Issues with DIVs

[Minstrel]

I'm laying out a site using floating DIV tags rather than tables, and I'm finding a strange problem. My layout is liquid (percentage widths), and I have two main columns...one is 17% and one is 81% (leaving a little short of 100% to prevent it from getting pushed to the next row by some browsers).

I'm adding padding to the 81% row, about 15 pixels on each side. Somehow, this is making the column wider which causes all sorts of layout problems.

Why is this happening? Padding shouldn't change the size of the block element, only constrain things within the element. My margins are 0.

Any help/thoughts would be greatly appreciated.

[Shani]

I'm pretty sure that your logic is incorrect. Both margins and padding add space around your text. The difference between margins & padding comes into play when you add borders. Padding is the space between the border and the text. Margin is between the border and the next element. If you want things to fit in this space you'll have to lessen the percentage of your div, and that will get tricky of course, but that's all the insight I have.

[Minstrel]

I'm pretty sure that your logic is incorrect. Both margins and padding add space around your text. The difference between margins & padding comes into play when you add borders. Padding is the space between the border and the text. Margin is between the border and the next element. If you want things to fit in this space you'll have to lessen the percentage of your div, and that will get tricky of course, but that's all the insight I have.

Nothing you're saying, though, actually contradicts what I said.

"Adding borders" is just making the borders of a block-level element visible. Block-level elements always have conceptual borders. Padding creates seperation between that conceptual border and elements within the block-level element, while margins create seperation between that conceptual border and elements *outside* that block-level element.

Nothing I've ever read or seen suggests that padding should make block-level elements larger. It just constrains things within them. Margins also don't technically make block-level elements any bigger, but they push elements further apart from one another, so the effect is similar.

To use a different example, padding doesn't make table cells larger, it just affects the positioning within the table cell.

[Shani]

Maybe I was not very clear on what I said. It is in fact, the exact opposite of what you said. You said margins & padding would constrain the elements within the block, I said they will add space around the block. So if your block is 300 px w/ 5px margins and 10px padding, your block will take up 330 pixels of space on the screen. So, when you are using percentages, it will be 81% + 15px + 15px making your overall block 30px wider than you had intended.

I do not think tables work the same way.

Again, I could be wrong, but it doesn't hurt to try. If you change the 81% to 71% and everything has been fixed, that's it, problem solved.

[Minstrel]

Maybe I was not very clear on what I said. It is in fact, the exact opposite of what you said. You said margins & padding would constrain the elements within the block,

No, I didn't say that. I said that padding constrain the elements within the block, and margins add space around the block.

So if your block is 300 px w/ 5px margins and 10px padding, your block will take up 330 pixels of space on the screen.

I'm pretty sure that's not how padding works...that's exactly how margins would work though. I've used padding and margins with DIVs quite a bit, which is why I'm so certain. It's always worked the way I'm saying.

In your example above, the block should take up 310 px and everything inside the block should be pushed towards the center by 10px.

Again, I could be wrong, but it doesn't hurt to try. If you change the 81% to 71% and everything has been fixed, that's it, problem solved.

I did try that, even before I posted, and it does solve it. The problem is that it's not consistent...elsewhere on the same page, padding isn't adding extra space around the block.

Strange, eh?

[Shani]

Okay...

According to my handy-dandy alert system in my email, someone else posted here. This person said the same thing I did and probably deleted the post, but I who knows?

I do know this: rather than argue with you, I have taken a few minutes to demonstrate what we are talking about. Look here and you will see that padding does not constrict the area inside the text block. Neither does margin. Both of these attributes work outside of the text block. Regardless of padding and margins, the text is the same size.

[karinne]

It was me who actually posted but deleted it. I basically wrote that you had to compensate paddings and margins in widths 'cause IE and FF interprets it differently. But... after reading "all" the posts, it was basically said already

[Minstrel]

I do know this: rather than argue with you, I have taken a few minutes to demonstrate what we are talking about. Look here and you will see that padding does not constrict the area inside the text block. Neither does margin. Both of these attributes work outside of the text block. Regardless of padding and margins, the text is the same size.

I think you misunderstood me, because your example shows exactly what I was saying. My comments above did not regard the "text block." They regarded the DIV block.

In your example, padding pushed the text further inwards, within the DIV. Margins added space around the DIV. This is exactly what I said.

But it looks like you were right that both effectively increase the size of the DIV. That's odd, since I haven't seen that effect before, but maybe that effect just happened to fall through the cracks in other work.

Thanks for the help.