0

Sorry for the rubbish question title, however to make up for that I have a jsFiddle:

http://jsfiddle.net/y167xveh/

I can't figure out why the content in the "Main Content" div is spilling out over the parents border. I've set the box-sizing mode to border-box which I thought resolved width issues like this where margins were added onto the width of the element?

.markBookPage div
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Any insight appreciated.

Marlon
  • 1,999
  • 2
  • 19
  • 36

3 Answers3

2

Instead of margin, use padding here:

#mbTableRootContainer {
  ...
  padding: 5px;
  ...
}

Fiddle

A good description of why margin doesn't work is in the accepted answer at When to use margin vs padding in CSS

"Margins are considered to be outside of the element, and margins of adjacent items will overlap."

Community
  • 1
  • 1
Rick Hitchcock
  • 33,093
  • 3
  • 40
  • 70
  • err, that works brilliantly, but am confused to why, I thought padding added internal space? – Marlon Dec 24 '14 at 12:19
  • It's just twigged that the border is on the cells, not the container. Thank you for your help. – Marlon Dec 24 '14 at 12:24
  • Well, that's a good question. Generally, you wouldn't add a `padding` to a table element. But in this instance, the 100% width causes the table to be the width of its parent, and the margin causes it to be offset 5px to the right. Using `padding` instead allows the "table's" contents to be padded 5px as desired. – Rick Hitchcock Dec 24 '14 at 12:26
0

Try this:

#mbTableRootContainer {
    display: table;
    width: 98%;
    margin: 4px;
    height: 400px;
}
vas_bar_code
  • 213
  • 1
  • 17
0

I'm not the css expert but your mistake is here:

#mbTableRootContainer {
display: table;
width: 100%;
margin: 5px;
height: 400px;

}

You setting your width to 100% and add a margin of 5px (left and right).

You can use the calc command:

width:calc(100% - 10px)
Fabian Lurz
  • 1,876
  • 4
  • 21
  • 50
  • Unfortunately calc is ignored by IE9 if display: table is used. Thanks though, didn't know calc existed until now. – Marlon Dec 24 '14 at 12:18
  • You are right. Depending on your audience this could be a problem. But check the stats here, if this is really a problem for your project: http://caniuse.com/#feat=calc – Fabian Lurz Dec 24 '14 at 12:23