Mozilla div width problem

[ohdear]

I'm sure there's a very simple answer, staring me in the face but I just can't seem to figure it out. I have two fixed width div's which display ok in IE. But when I view in Mozilla the fixed width seems to be extended.

CSS

#bookright {
position:absolute;
top:30px;
left:402px;
background:
url(img/bookright.jpg)
repeat-y;
border-top: solid 2px #4D4D4D;
border-bottom: solid 2px #4D4D4D;
border-right: solid 2px #4D4D4D;
width: 372px;
height: 544px;
padding-left: 25px;
text-align:left;
}

#blog {
position: absolute;
top: 60px;
left: 30px;
width: 310px;
height: 465px;
padding-left: 15px;
padding-right: 15px;
line-height: 18px;
letter-spacing: 1px;
background:
url(img/black-line.jpg)
repeat;
text-align: justify;
overflow:auto;
}

HTML

<div id="bookright">
<div id="title"></div>

<div id="blog"><br />
This is sample text<br />
This is sample text<br />
</div>
</div>

[SuzyUK]

ohdear - Welcome to WebmasterWorld

It's the "Box Model [w3.org]" ;)

The box width is given by the sum of the left and right margins, border, and padding, and the content width. The box height is given by the sum of the top and bottom margins, border, and padding, and the content height.

so in your case the sum of:
372px + 25px + 2px = 399px

is what you're seeing in Moz.. in fact all CSS standard compliant browsers...

but IE doesn't do it like that ;) its width is the specified width (372px) with the borders, and padding inside it, reducing the content area accordingly..

There are numerous Box Model Hacks, or ways to feed IE different values or another way is simply to have no borders and padding on your containing divs but then nest divs inside them with no width required and put the borders/padding on them

The Box Model is IMO the most important thing to understand when getting to grips with CSS.. once you get it sorted the rest is nearly plain sailing ;)

Suzy

[ohdear]

Thanks so much! :)