BillyRayPreachersSon
Programmer
This problem has been bugging me for the past hour or two. There's probably a really simple explanation, but I can't seem to see the woods for the trees at the moment!
I'm pretty sure it's my understanding of how a DIV should be sized that is flawed, because I can't imagine that Opera, Firefox, and IE, are all displaying this wrong.
Basically, if I create 2 DIV elements, one with a width of 600px, and one with no width specified, the width of the second DIV (with no width specified) should be 100% of the width of its parent container - in this case, the body.
The body should have a width of at least 600px, due to the first DIV (and the red background colour shows this to be true, if you shrink your browser window until you get a scrollbar).
However, when the horizontal scrollbar is present, the second DIV appears to be less than 600px wide (it should always be 100% of the parent width, right?)
Am I missing something, or just misunderstanding how the 100% thing works (or suffering from staring at the same page for hours X-)) ?
Thanks,
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")
I'm pretty sure it's my understanding of how a DIV should be sized that is flawed, because I can't imagine that Opera, Firefox, and IE, are all displaying this wrong.
Basically, if I create 2 DIV elements, one with a width of 600px, and one with no width specified, the width of the second DIV (with no width specified) should be 100% of the width of its parent container - in this case, the body.
The body should have a width of at least 600px, due to the first DIV (and the red background colour shows this to be true, if you shrink your browser window until you get a scrollbar).
However, when the horizontal scrollbar is present, the second DIV appears to be less than 600px wide (it should always be 100% of the parent width, right?)
Am I missing something, or just misunderstanding how the 100% thing works (or suffering from staring at the same page for hours X-)) ?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>DIV width test harness</title>
<style type="text/css">
body, div {
margin: 0px;
padding: 0px;
}
body {
background-color: red;
}
#div1 {
width: 600px;
height: 50px;
background-color: black;
}
#div2 {
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>Thanks,
Dan
[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]