Setting CSS padding in negative

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/

Negative padding is not allowed in CSS. – Brad Dec 26 '12 at 21:17 — Brad, Dec 26 '12 at 21:17

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

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.

edited May 23 '17 at 11:43

Community

1
1

answered Dec 26 '12 at 21:19

Big-Blue

429
9
22

Setting CSS padding in negative

1 Answers1