firefox messes with my div padding

when divs' padding is applied FF extends div's height

[procrastinator]

Hi,

I've spent couple of hours on this and just can't figure it out... I'll try it first without a code.

I need to have five boxes vertically (one after the other) inside a div with exact dimensions: 2000px height & 150px width (left vertical menu - or something like that).

So I did the "wrap" div with these exact dimensions. In it I've put 5 divs with exact height. Since I wanted them separated I applied margin of 5px between them and the top/bottom of wrap. This means 2000px - 5x5px = 1975px ... divided by 5 (boxes) = 395px height per box.

So far all good. But when I apply padding in the five boxes, FF extends the last (fifth) box over the wrap's bottom. Strangely, in IE it works perfectly. Looks like FF includes padding (of inner divs) to the whole height which then exceeds wrap's height.

I could just subtract that but I need a cross-browser result.

..

Heck .. I'll paste the code anyways...

HTML

 <div id="wrap"> 
 <div id="box1">
 box1
 </div> 
 <div id="box2">
 box2
 </div>
 <div id="box3">
 box3
 </div> 
 <div id="box4">
 box4
 </div>
 <div id="box5">
 box5
 </div> 
 </div>

CSS

#wrap {
 width: 150px;
 height: 2000px;
 background-color: #999999;
 padding-top: 5px;
 padding-bottom: 5px;
}
#box1 {
 height: 395px;
 margin-left: 5px;
 margin-right: 5px;
 background-color: #FFFFFF;
 padding-top: 5px;
}
#box2 {
 height: 395px;
 margin-top: 5px;
 margin-left: 5px;
 margin-right: 5px;
 background-color: #FFFFFF;
 padding-top: 5px;
}
#box3 {
 height: 395px;
 margin-top: 5px;
 margin-left: 5px;
 margin-right: 5px;
 background-color: #FFFFFF;
 padding-top: 5px;
}
#box4 {
 height: 395px;
 margin-top: 5px;
 margin-left: 5px;
 margin-right: 5px;
 background-color: #FFFFFF;
 padding-top: 5px;
}
#box5 {
 height: 395px;
 margin-top: 5px;
 margin-left: 5px;
 margin-right: 5px;
 background-color: #FFFFFF;
 padding-top: 5px;
}

Any ideas greatly appreciated. Thanks.

[sgietz]

Paddings and margins are *added* to the width, so a div with a height of 2000px and a 5px top and bottom padding is actually 2010px tall.

Another thing for consideration, instead of having a class for each child container, simply give them all the same class (if they all have the same attributes), or no class at all and use the element name. For example ...

#wrap div {
height: 395px;
margin-left: 5px;
margin-right: 5px;
background-color: #FFFFFF;
padding-top: 5px;

If one div (usually the first, or last in a group) needs some extra tweaking, use the style tag directly on that element. Shorthand also comes in handy (short-handy :)). Instead of writing out the margins as you did, the equivalent is margin: 0 5px (same for padding).