Closed Bug 272437 Opened 20 years ago Closed 20 years ago

a block element doesnt expand its parent's element width if its width is bigger than the total window size

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
Other Branch
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: jhm, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.5) Gecko/20041110 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.5) Gecko/20041110 Firefox/1.0

this problem occurs if you work with over-sized tables, which contain heaps of
data. the <head> and <body> elements automatically adapt the total width (the
highest width value of one element in the entire document). but <div> dont do
so. here is a quick example:

<html>
<head>
<style>
html {
 width: 100%;
 height: 100%; 
 margin:0px;
 padding:0px;
}

body {
 width:inherit;
 height: 100%;
 margin:0px;
 padding:0px;
 background-color:yellow;
}

#block {
 width:inherit;
 background-color:red;
 height:100px;
}
</style>
</head>

 <body>
  <div id="block">
   <div style="width:9000px; text-align:right; background-color:blue;">huhu</div>
  </div>
  
 </body>
</html>


Yellow represents the <body>, Blue the extra large content, and Red the parent
element, which should adapt the width of its child (in this example 9000px).

If you add a overflow:scroll; to the #block element, you will see, that its a
bug (because he would adapt the width, but gets cropped at the maximum window
width).

Reproducible: Always
Steps to Reproduce:
1. Copy this code in a new html file
<html>
<head>
<style>
html {
 width: 100%;
 height: 100%; 
 margin:0px;
 padding:0px;
}

body {
 width:inherit;
 height: 100%;
 margin:0px;
 padding:0px;
 background-color:yellow;
}

#block {
 width:inherit;
 background-color:red;
 height:100px;
}
</style>
</head>

 <body>
  <div id="block">
   <div style="width:9000px; text-align:right; background-color:blue;">huhu</div>
  </div>
  
 </body>
</html>

2. read the details
Actual Results:  
the width of a parent block element doesnt adapt the width of a child element. 

Expected Results:  
The parent block element should adapt the width of the child element, this is
the only way to properly design rich-content-tables with a huge width.
Assignee: firefox → nobody
Component: General → Layout
Product: Firefox → Core
QA Contact: firefox.general → core.layout
Version: unspecified → Other Branch
The body is acting just like the <div>; it's just that in HTML the body
background is painted on the whole canvas.  Try putting a border on the body to
see its real size.

For the rest, this is invalid; the behavior you see is the correct one per the
CSS Box Model.
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.