Question

Consider the following HTML. I have a .wrap div which has left and right padding of 50px. Inside that div I have another div .full. I want to increase its default width by overcoming the padding of the .wrap.

I am setting its padding to -50px so that its width becomes equal to the width of the .wrap, but it does not work.

HTML:

<div class="wrap">
    <div class="inner">
        <div class="normal">xx</div>
        <div class="full">should be same width (300px) as wrap</div>
    </div>
</div>

CSS:

.wrap{
    height: 500px;
    width: 300px;
    margin: 0 auto;
    padding: 0 50px;
    background: yellow;
}

.full{
    background: orange;
    padding: 0 -50px;
}

Demo:
http://jsfiddle.net/WDS6X/

Answer 1

In this case, you’d need to use margin, padding is used for space on the inside.
Using

margin: 0 -50px;

instead of the padding in the .full-div works like you wanted it to, here is the JSFiddle provided by nienn in the comments.

For further understanding, take a look at this SO thread containing a pretty nice explanation.