How do you properly set the margin of a block-element, when within a block-element with scrollbars?

Question

I have <div> block that is used for displaying content. I've setup the div so that if the content is to big, a vertical scrollbar should appear.

Now, I need to put table within this container div, and I need it to be as wide as the parent, with a margin of a couple pixels on each side. However, when I apply a margin to the inner-table, the right-side is sizing beyond the edges of the parent div, with the scrollbars.

<div  style="overflow: scroll; overflow-x:hidden; position:relative; width: 100%; height:100%; background: magenta">
<table class="data_container"  style="width:100%;">
    <tr>
        <td style="height:400px">How can I fix my margins?</td>
    </tr>
</table>

.data_container {
    border-color: black;
    border-style: solid;
    border-width: 2px;
    background-color: white;
    margin: 50px !important;
    font-size: smaller;
}

Also, here is an example of what I'm seeing in JSFiddle. This is a barebones example that demonstrates the problem.

@j08691 It's now updated, though I'd still recommend seeing it in action in JSFiddle. — RLH, Oct 19 '15 at 18:43
What you said in the title and intro is not correct, the inner box is a not a
, and table does not fully acts as block level. — Stickers, Oct 19 '15 at 18:44
You can do both. You should always post your code in your question, and optionally add a stack snippet or third party resource like jsFiddle. If you only put your code in a fiddle, and they go away or are down, then your question loses all value to future visitors. — j08691, Oct 19 '15 at 18:44
@JacobGray Run the fiddle. I need a box (in this case a table) with margin around it. However, when I apply the margin, it's hanging over (or under) the edge of the scrollbar. — RLH, Oct 19 '15 at 18:44
Possible duplicate of [Div with margin-left and width:100% overflowing on the right side](http://stackoverflow.com/questions/5637643/div-with-margin-left-and-width100-overflowing-on-the-right-side) — Kristijan Iliev, Oct 19 '15 at 18:56

score 1 · Answer 1 · answered Oct 19 '15 at 18:45

1

Is This What needs to happen? What I've done here is replace the margin of 50px with a padding of 50px to its parent

answered Oct 19 '15 at 18:45

Gust van de Wal

5,211
1
24
48

Yes, and no. I am showing a simplistic variation of what I need. Padding would work if it were the only block within the parent. It isn't and padding doesn't provide the desired result. – RLH Oct 19 '15 at 18:55

score 1 · Accepted Answer · answered Oct 19 '15 at 18:45

1

One option is to use CSS' calc():

.data_container {
  border-color: black;
  border-style: solid;
  border-width: 2px;
  background-color: white;
  margin: 50px !important;
  font-size: smaller;
  width: calc(100% - 100px);
}

<div style="overflow: scroll; overflow-x:hidden; position:relative; width: 100%; height:100%; background: magenta">
  <table class="data_container">
    <tr>
      <td style="height:400px">How can I fix my margins?</td>
    </tr>
  </table>
</div>

answered Oct 19 '15 at 18:45

j08691

204,283
31
260
272

1

This!!! I had no idea that such a function existed in CSS. Sorry for all of my stupidity. I've been developing windows applications for over 10 years and only recently have I started front-end web development. This type of stuff is partially why it's taken me this long to move over from Windows to web. You've just solved many of my annoyances showing me the "calc(...)" function. Thank you, thank you! – RLH Oct 19 '15 at 18:51
The one problem with `calc()` is IE doesn't have the best support – Jacob G Oct 19 '15 at 19:05

score 0 · Answer 3 · answered Oct 19 '15 at 18:45

0

You shouldn't use tables for these sorts of things.

HTML

<div id="container">
    <div id="inside">
        Fixed your problem.
    </div>
</div>

CSS

#container {
    width:90%;
    height:400px;
    overflow:scroll;
    border:1px solid blue;

}

#inside {
    width:90%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid red;
}

I think this is what you wanted, if it isn't tell me, hope this helps. Here is the fiddle

answered Oct 19 '15 at 18:45

Sam Chahine

530
1
17
52

Why do you think he is trying to use the table for the layout? The table has a class called `data-container`, which might just as well mean there is data gonna be inside, which tables are really good for ;) – Gust van de Wal Oct 19 '15 at 18:48
I didn't think of that, hopefully this will help someone out there :P thank you for pointing that out! :) – Sam Chahine Oct 19 '15 at 18:53

score 0 · Answer 4 · answered Oct 19 '15 at 19:01

People are all trying to give solutions without explaining the problem properly.

The width property gives the width of the inside of the element, not including any padding, border or margin. When you give it a percentage value, it multiplies the parent's width property by that percentage and applies it to the child without considering any element's padding, margin or even borders. It really means "take n% of the parent's width and set the child's width to that", where width is the inner width only.

Luckily, modern CSS offerts you to write something like calc(100% - 20px) to set the inner element's size to a certain size relative to its parent. You have to manually subtract any border, padding or margin from this child's width yourself.

How do you properly set the margin of a block-element, when within a block-element with scrollbars?

4 Answers4