Closed
Bug 406224
Opened 18 years ago
Closed 18 years ago
DIV with width=100% overflows containing block
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: gmangesh555, Unassigned)
Details
(Keywords: testcase)
Attachments
(3 files)
firefox20010_bug406224_screenshot1.JPG
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10
A div contained inside a containing block overflows the containing block if the inner DIV has a width of "100%" and a non-zero margin.
Reproducible: Always
Steps to Reproduce:
1. Create a DIV inside another block level element such as a TABLE or another DIV
2. Specify a width of 100% for the inner DIV
3. Specify a margin (of say 20px) for the inner DIV
Actual Results:
The inner DIV overflows the containing block
Expected Results:
The inner DIV should stay within the containing block.
I expected the inner DIV to be rendered similaar to the case where the width of the inner DIV is set to "auto".
Source code sample1: start
<html>
<head>
<style>
div {
width: 100%;
margin: 20px;
border: 1px dotted black;
}
table {
width: 80%;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>This is text inside a div</div>
</td>
</tr>
</table>
</body>
</html>
Source code sample1: end
The workaround is to specify a width of "auto" for the inner DIV.
However, unfortunately, I cannot use "width=auto" if I want my (more complicated html) to render properly in both IE and FireFox.
|
||
Comment 1•18 years ago
|
||
|
|
||
Updated•18 years ago
|
Component: General → Layout
Keywords: testcase
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
|
Reporter | |
Comment 2•18 years ago
|
||
Screenshot with an outer table and an iiner DIV that overflows.
|
||
Comment 3•18 years ago
|
||
margins are in addition to the specified content width. So what you are saying is make the div the width of it's container, plus 20px margin on each side.
Status: UNCONFIRMED → RESOLVED
Closed: 18 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 4•18 years ago
|
||
Screenshot with an inner DIV and an outer DIV (intead of an outer TABLE).
Sample code2: start
<html>
<head>
<style>
.inner {
width: 100%;
margin: 20px;
border: 1px dotted black;
}
.outer {
width: 80%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">This is text inside a div</div>
</div>
</body>
</html>
Sample code2: end
|
|
Reporter | |
Comment 5•18 years ago
|
||
Problem tested and reproduced in:
FireFox 2.0.0.10
trunk version: 3.0b2pre
|
|
Reporter | |
Comment 6•18 years ago
|
||
Dave,
Thanks. I'll read the CSS spec more carefully.
-Mangesh
|
|
Reporter | |
Comment 7•18 years ago
|
||
For the benefit of those watching:
Another better "workaround" I can use to get my desired rendering is to specify a "padding" of 20px for the outer element instead of a "margin" on the inner element.
Dave, thanks for the lightning fast response.
-Mangesh
|
|
Reporter | |
Comment 8•18 years ago
|
||
I do not believe the explanation given in Comment# 3 is correct.
Here is the relevent snippet from the CSS2 Specification:
-----------------------
10.3.3 Block-level, non-replaced elements in normal flow
If 'left' or 'right' are given as 'auto', their computed value is 0. The following constraints must hold between the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
(If the border style is 'none', use '0' as the border width.) If all of the above have a specified value other than 'auto', the values are said to be "over-constrained" and one of the computed values will have to be different from its specified value. If the 'direction' property has the value 'ltr', the specified value of 'margin-right' is ignored and the value is computed so as to make the equality true. If the value of 'direction' is 'ltr', this happens to 'margin-left' instead.
-----------------------
I read the width formula above to mean that the computed width of a contained block to never exceed the computed width of its container width.
Also, I read the following snippet to mean that, in the cse of the sample code above, the right margin should be ignored and the "'width' value should be computed to make the equality true".
<quote>
If the 'direction' property has the value 'ltr', the specified value of 'margin-right' is ignored and the value is computed so as to make the equality true
</quote>
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
|
|
||
Comment 9•18 years ago
|
||
If you follow the full text of that what should happen is that the margin-right value gets changed to -20px since the values are over-constrained and we are in ltr mode. This doesn't affect anything really. See also bug 10218, bug 111198, bug 178529
Status: UNCONFIRMED → RESOLVED
Closed: 18 years ago → 18 years ago
Resolution: --- → DUPLICATE
|
|
Reporter | |
Comment 10•18 years ago
|
||
Ok. Agree. Thanks again.
Should have known that FireFox's behaviour is correct - it implements the CSS specs quite accurately.
-Mangesh
You need to log in
before you can comment on or make changes to this bug.
Description
•