Question

I have an absolute element inside a relative container. The absolute element has its width:100% which gives the width of the relative container element.

My goal is for the absolute element to stretch beyond the 100% of the container, 40px from right and left.

This I am trying to achieve by setting pading left & right to 40px on the relative container, together with box-sizing: content-box;. The problem is that the absolute element doesn’t stretch to 100% of the relative container. Instead it stretches only within the content space without including the padding.

Edit
Turns out that this is only in Chrome.

Answer 1

You need to use jQuery here to calculate the width of DIV with paddings. Basically we need to apply the .outerWidth() of DIV to the table –

Demo – http://jsfiddle.net/GDU7Q/

Hope this helps!