views:

131

answers:

1
<div style="padding:20xp;width:100%;"
    <div style="width:?????">

    <div>
</div>

I would like the inner div to fill the screen completely, even when the outer div has 20px padding. How can that be done? thanks.

+2  A: 

Give the inner <div> a negative margin to negate the padding and fill the width, example:

<div style="padding:20px;">
    <div style="margin: -20px;">
      Content Here
    <div>
</div>
Nick Craver
+1 this, or change the layout so you won't have to do this at all (e.g. by giving the inner `div` a margin of 20px instead of the padding to the outer `div`) .
Pekka
@Pekka - Agreed, a layout change would be a **much** better solution if at all possible
Nick Craver
In general, you will be happier not using padding on containers that contain other containers. Use margin on the inner containers instead when you want them offset as if there were padding. That way you retain the option to create things like a full-width header or footer inside that outer container. The only place I *do* use padding, actually, is on containers that contain text only.
Robusto