Incorrect page width with "width" CSS attribute

RESOLVED INVALID

Status

()

RESOLVED INVALID
17 years ago
17 years ago

People

(Reporter: borekl, Assigned: attinasi)

Tracking

Trunk
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

17 years ago
When I use "position : absolute; width : 100%" CSS code to cause element (such
as DIV) to fill the page horizontally; the resulting page is actually slightly
wider than browser's window causing horizontall scroller to appear. See the
submitted URL for demonstration. Seen this problem in both 1.0 and 1.1a under
both Linux and Windows.

Comment 1

17 years ago
I also see this problem on BuildID 2002071208 on WinXP
The rendering is correct.  Say the root element (the <html>) is 100px wide.  It
has no border, padding or margins.  Now the <div> has "width:100%" and is
positioned.  So it too is 100px wide and has no border, padding, or margins (the
author sheet sets those to 0).  The <body> is "width:auto" and  has 8px margins
in the default user-agent stylesheet in Mozilla.

Now the left edge of the <div> is 8px from the left edge of the <html> because
you did not set "left" on the div!  In that case, the CSS spec says to find
where the left edge would be if the div were not positioned (which is inside the
<body>'s margins) and to use that as the left offset.  So now you have the <div>
being 100px wide and starting 8px from the left of the <html>, so it overflows
by 8px and you get 8px of scrolling room.

Setting "left:0" on the div will get rid of the scrollbar, as will getting rid
of the margins on <body>, etc.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 17 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.