Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Feb 2006
    Location
    San Francisco, California
    Posts
    8
    Member #
    12551
    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.

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    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.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Junior Member
    Join Date
    Feb 2006
    Location
    San Francisco, California
    Posts
    8
    Member #
    12551
    Quote Originally Posted by DCScene
    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.

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    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.
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    Junior Member
    Join Date
    Feb 2006
    Location
    San Francisco, California
    Posts
    8
    Member #
    12551
    Quote Originally Posted by DCScene
    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?

  7. #6
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    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.
    Shani

    I have an eye for detail like you'd never believe.

  8. #7
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    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
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  9. #8
    Junior Member
    Join Date
    Feb 2006
    Location
    San Francisco, California
    Posts
    8
    Member #
    12551
    Quote Originally Posted by DCScene
    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.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com