How to add margin without pushing content off screen?

Question

I've got a two column layout that I'd like to add some padding\margin to the right column without pushing the content off screen. In my illustration the arrow points to where I'd like the extra space to be. When I add margin or padding to the red div it pushes the red div off the screen to the right, I'd like to avoid that. Is there a reccomended way to do this? Maybe a wrapper div or something? Thanks

Answer 1

Without seeing the code, all I can tell you is...

If you don't want the content pushed off the screen, then the width of all of your elements -- including margin and padding -- must add up to no more than 100% or the max pixel width you want. (And frequently, when mixing pixels and percentages, you probably want even less.)

Here is a simple example:

<div id="left"></div>

<div id="right"></div>

#left{
    border:1px solid red;
    width:20%;
    height:50px;
    margin-right:4%;
    float:left;
}

#right{
    border:1px solid red;
    width:75%;
    height:50px;
    float:left;
}

http://jsfiddle.net/nWEnj/