Closed Bug 281830 Opened 20 years ago Closed 20 years ago

100% width of divs is computed wrong when display is switched from none to block in javascript

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Platform:
All
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: charles, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; rv:1.7.3) Gecko/20040913 Firefox/0.10
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; rv:1.7.3) Gecko/20040913 Firefox/0.10

(View attached html)

The content div is set to 100%, which, to my understanding, should mean 100% of
containing block, which is right most of the time, but, in this particular case,
once you hit the "show" link and the display is switched to block, the width of
"content" seems to be computed as 100% of the body element (which causes havoc
with the scroll bar etc.)

If you set the width of "content" to parent instead of 100%, everything is just
tfine

Reproducible: Always

Steps to Reproduce:
1.Load attached html into the browser
2.Click the SHOW link

Actual Results:  
The content div is larger than the container

Expected Results:  
The content div should be the whole width of the container, not larger.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style type="text/css">
			body {
				padding-left:15px;
				padding-right:18px;
				padding-bottom:20px;			
			}
			#container {
				border-width:1px;
				margin-top:0px;
				margin-bottom:10px;
				width:100%;
				background:blue;
				display:none;
				height:100px;
			}
			#content {
				
				width:100%;
				padding-left:36px;
				padding-bottom:22px;
				padding-top:10px;
				padding-right:36px;
				background:red;
				height:20px;
			}
		</style>
		<script language="javascript" type="text/javascript">
			function showContent(){
					document.getElementById('container').style.display = "block";
			}
		</script>
	</head>
	<body>
		<div id="container">
			<div id="content">
				CONTENT
			</div>
		</div>
		<a href="javascript:showContent();">SHOW</a>
	</body>
</html>
> The content div is set to 100%, which, to my understanding, should mean
> 100% of containing block, 

No. 100% means 100% of the available width of the containing block; so it
excludes margin, border and padding of the containing block. If you increase
respective values of border and padding of the containing block, then 100% width
for its immmediate child will equate to less space at its disposal.

> which is right most of the time,
Your comment here suggest randomness of calculations.

> the width of
> "content" seems to be computed as 100% of the body element (which causes havoc
> with the scroll bar etc.)

No. The width allocated to the #content div is 100% of the available width of
its container but then you added more constraints: padding left and right adds
up 72px making the box size wider and also extending to the right of the body box.

> Steps to Reproduce:
> 1.Load attached html into the browser

Next time, please attach code by using the "Create a New Attachment" link.

Resolving as INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.