How to add margin without squeezing content off the screen?

Question

I have a two-column layout that I would like to add to the box on the right, adding a space \ margin, without pushing the content off the screen. On my illustration of arrow indicates where I would get additional space. When I add margin or padding to the red div, it drops the red div from the screen to the right, I would like to avoid this. Is there a recommended way to do this? Maybe a wrapper div or something else? Thanks

Answer 1

Without viewing all the code that I can tell you this ...

If you do not want the contents coming out of the screen, the width of all your items, including margin and padding , must contain no more than 100% or a maximum width of the pixel that you want. (And often, when you mix 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/

Answer 2

If your div has a width of 100 pixels, and you add padding-right: 20px, then the width is 120px, so minus the amount of the width of your add-ons when you are using the padding-left / right.

Answer 3

To solve the problem, as pointed out by others, you need to subtract the value of your add-ons from the width of the elements due to the box model . Padding is taken into account in a calculation that determines the size of an element within user agents.

CSS3 adds attribute box-sizing , which allows you to bypass the default rendering of the box model, and instead to instruct him to include residence inside the cell, while fully respecting the specified width and height:

 /*Property without vendor prefixes*/ box-sizing:border-box; 

See this article: http://www.css3.info/preview/box-sizing/

Or spec :

box border The specified width and height (and the corresponding min / max properties) of this element define the border of the element field. That is, the gasket or any boundary defined on an element, lined and drawn inside the specified width and height. The width and height of the content are calculated by subtracting the width of the boundary and fill the corresponding sides of the predetermined width and height properties. Since the width and height of the content can not be negative ([CSS21], section 10.2), this calculation is filled to 0.

Answer 4

Is that what you need after?

jsfiddle

The empty space between the left and right div can be changed with the "margin-left" in the right div class (more fields gives more spaces).