16

I've stumbled across an issue that I'm not entirely sure how to resolve.

I have a page with a number of divs, one of which contains a table but has a margin of 20px. I need this table to 'butt' against the right-hand side of another div, which I have accomplished by using a margin of -20px - works as I'd hoped. As this div (which covers the entire right-hand side of the page) is fluid, the table has a width of 100%.

Whilst the left-hand side of the table is where I want it, the right-hand side is now 20px short of everything else.

Is there a way I can keep the negative margin on the right, without it also moving the table 20px from the right? I've tried a few things without success. My table CSS is pasted below.

.pricetable {
    width:100%;
    margin-left: -20px;
    padding: 5px;
}
Lee
  • 947
  • 2
  • 13
  • 28
  • possible duplicate of [Div width 100% minus fixed amount of pixels](http://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels) – Gajus Apr 06 '14 at 13:15

5 Answers5

14

My solution was to wrap the table inside a div with the negative margin.

<div style="margin-right:-20px">
  <table style="width:100%">
     ...
  </table>
</div>
mbillard
  • 36,360
  • 18
  • 71
  • 97
  • Had given up on using div to automatically resize and position the elements of my page. Doing a table with width 100% and then having cells occupy the height and width of the margins will actually do the job nicely to my child div. – Jonats Nov 19 '13 at 10:49
7

You can also set the width to less than 100% and set margin auto:

.pricetable {
    width:90%;
    margin: auto;
}

Hope it helps.

leandropoli
  • 71
  • 1
  • 2
  • Can't believe there isn't a better solution, but at least this one has equal margin on both sides. – ColinM Mar 05 '13 at 21:45
7

it is now possible with CSS calc:

.pricetable {
    width: calc(100% - 20px);
    margin-left: -20px;
    padding: 5px;
}
YakovL
  • 5,213
  • 10
  • 46
  • 71
  • Be careful: the minus operator must be enclosed by spaces - neither `100%- 20px` nor `100% -20px` will compute. – AmigoJack Sep 07 '20 at 20:05
3

You could absolutely position your table, so that it's aligned at the right.

position: absolute;
right: 0;

There's no way to add a left margin without moving the table, because the table offset is calculated in this way: margin + padding + width = offset width.

When you set the width to be 100%, the margin and padding cause the element to expand.

  • Padding (left) X, (right) y + width = over 100%
  • over 100% + negative width (X+y) = 100%.

The first definition adds some padding at each side of the table. The second definition shifts the table to the left, because it's a negative margin.

Rob W
  • 315,396
  • 71
  • 752
  • 644
  • Thanks Rob - that worked sorting out the right-hand side, but seems to create all manner of problems on the left. I suspect I'm fighting a losing battle with this. It did however occur to me that a simpler solution would be to add margin the the other elements to bring them inline with the table. – Lee Oct 02 '11 at 10:39
  • BTW - thanks also for the explanation, makes complete sense the way you explained it. – Lee Oct 02 '11 at 10:39
  • Thanks for pointing that out Rob - hadn't noticed the Accept feature before. – Lee Oct 02 '11 at 21:37
3

try giving table-layout:fixed and see

Bala
  • 683
  • 5
  • 10