100% wide divs

Border overhangs the edge of the browser window even in Standards mode

[MatthewHSE]

I've been trying hard to get away from tables, and though I've been using <div>'s quite a lot lately, I'm not all that familiar with how they work. Hence this question.

I have a page where I want a header div, 100% width, with a 2px border all around the edge. When I view the page in Mozilla or IE, the right-edge border hangs over the edge of the browser window, creating a horizontal scrollbar. This occurs regardless of how thick the border is. The left border displays fine, but the entire right border - but only the right border - extends past the browser window.

I'm using a strict doctype and the page is rendering in standards mode. Here's the pertinent CSS:

body {
margin: 0px;
}

.header {
width: 100%;
background-color: #000080;
border: 1px solid #cee1f0;
font-weight: bold;
font-size: 24px;
color: #ec0606;
}

(And yes I know those colors are odd but this is just for experimental purposes and I wanted things to stand out! :)

The problem described above occurs only when I use a div for the header. When I use a table and apply class="header" to the top cell, everything is fine.

This seems very odd to me; does anyone have any ideas?

Thanks,

Matthew

[Goober]

Howdy,

Would you need to define a left or right margin?

Goober

[edited by: Goober at 5:50 pm (utc) on Nov. 11, 2003]

[jetboy_70]

You need to do a bit of research on the 'CSS box model'. This will tell you that both 'border' and 'margin' properties are added outside the box, instead of inside. So by making a div (i.e. a box) 100% wide and adding a 1px left border and a 1px right border you are in fact creating something 100%+2px wide - wider than 100%!

[MatthewHSE]

!?

It renders just like I had expected it would with 100% width. How can this be? Isn't 100% simply 100%? And how can 80% stretch to 100%?

Very confused here; hope someone can explain what seems like very strange and illogical behavior!

[DrDoc]

Don't set the width: The div will be 100% by default (and that's a calculated width, including borders, margins, and padding).

[MatthewHSE]

Thank you. This clears up a number of issues I've been experiencing. But I still have one question; why does setting a div to 80% still allow it to stretch to 100%? I even tried setting it to a width in pixels, but it still was 100%. And yet, on my own site (see profile), I'm using divs set to a pixel-width and they are, indeed, the proper width. Can somebody explain divs and widths to me? I researched the box model and understand that now, but the overall width question still seems to be unanswered.

Thanks,

Matthew

[DrDoc]

Technically percentage width and height means nothing, unless the parent element has a set height/width. And, it seems like some browsers only understand 100%, but get anything else mostly messed up.