Padding behaving like Margin

Question

I have two divs side by side within a wrapper div. They fit perfectly and display correctly. However, when I try to add padding to the left side of the left hand div, it not only moves the contents of that div over to the right, but it actually moves the content of the right hand div over as well! If I add anything over 20px of padding it actually moves the right hand div to down to the next row! How on earth is this possible? Posting CSS and HTML below. The wrapper div is "hwrapper". The left hand div is "rbox", and the right hand div is "card". As I said, adding padding to the left side of "rbox" moves the content of "card" to the right as well. How can I fix this?

    #header {
    height:800px;
    width: 100%;
    margin-top: 0px;
    background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7;
    }
#hwrapper {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    text-align: center;
    }
#header .logo {
    padding: 3px;
    text-align: center; 
    }
#rbox {
    background:url(/assets/hredbox.png) 0 0 no-repeat;
    height: 420px;
    width: 274px;   
    float: left;
    text-align: left;
    padding-top: 10px; 
    }
#card {
    margin-left: auto;
    height: 420px;
    width: 720px;
    background:url(/assets/silverbackh360b0.png) 0 0 no-repeat;
    float: right; 
    text-align: left;
    padding-top: 20px;
    }

HTML:

    <div id="header">
    <div class="logo"><%= link_to image_tag("etlogo.png",alt:"Logo"), 'index.html' %></div>
    <div id="hwrapper">
        <div id="rbox"><span><center>Some Text</center></span><br><p><br>
            <dl>
            A list goes here.
            </dl><br><p><br>
                <span><center>Log In Here</center></span>
        </div>
        <div id="card">Lots more text in here.
        </div>
    </div>
</div>

Any help would be greatly appreciated as I was under the belief that padding only effected elements within a block, and margin effected the relationship between blocks.

Answer 1

I ran into this issue as well. Make sure you use box-sizing. Try applying this code:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This allows you to use padding within a div and not expand it's width.

Answer 2

I had a similar problem. I had the following HTML:

<div style =
" padding-left  : 12px;
  position      : absolute;
  left          : 0px;
  width         : 120px;
  border        : solid 1px RED;

To my surprise when I changed padding-left from 0px to 12px, the red right-border moved 12px to the right. Very annoying.

I was able to stop this happening by adding 'box-sizing: border-box' to the style. The annoying moving right-border is gone with this addition:

<div style =
" padding-left  : 12px;
  box-sizing    :  border-box;

  position      : absolute;
  left          : 0px;
  width         : 120px;
  border        : solid 1px RED ;

So "box-sizing:border-box" solved this problem. The reason I found the original behavior so counter-intuitive at first was that I was using ABSOLUTE positioning, so I assumed that "width:120px" would have absolutely positioned the right-border at 120px. And I assume it would do something like that if I said: "right:120px;", but that would mean 120px from the right edge of the page.

In summary padding-left: affects the position of the right border if

1. You use 'width:' (rather than 'right:') and
2. You don't specify "box-sizing:border-box"