Closed Bug 285721 Opened 20 years ago Closed 20 years ago

<div> height is poorly formed when not floated

Categories

(Core :: Layout, defect)

1.0 Branch
x86
Windows XP
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 210703

People

(Reporter: bryce, Unassigned)

References

()

Details

(Keywords: testcase)

Attachments

(3 files, 2 obsolete files)

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050307 Firefox/1.0+

Look at the bottom of this page, and you will see the white box (div) that is  
called "content", that did not grow to fit the image.  I do not believe the 
image is floated so it is part of the normal flow and should be accommodated.  
When the div is floated, it magically fixes itself.  Please see this page for 
the fixed version:

http://www.sitesforart.com/gallery.asp?
PageID=1411&UserID=253&css=http://www.designapproach.com/sitesforart/top_navigat
ion_tan4.css

Please note that setting a proper height for the 'imagebox' class works, but 
since the images are variable height this destroys the style integrity.  
height: auto  should be a solution, but doesn't help (not sure if this is a 
valid style).

Reproducible: Always

Steps to Reproduce:
1. create some nested divs, according to this page layout, a common method of 
doing things
2. see style sheet for details

Actual Results:  
Images flowed outside of their parent box.

Expected Results:  
Parent box should expand to accommodate images.

parent box will expand only to the size of the text, unless the parent box is 
floated, in which case it expands to fit the image as well.
Please create a minimized testcase showing your problem and upload it:
https://bugzilla.mozilla.org/attachment.cgi?bugid=285721&action=enter
Assignee: firefox → nobody
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.0 Branch
Attached image image for testcase
testcases will follow
Attached file testcase 1 (obsolete) —
<style type="text/css">
.content {
//	float: left;
	PADDING: 5px 20px 20px 20px; 
	WIDTH: 620px;  
	BACKGROUND-COLOR: lime;
}
.galleryimages {
	CLEAR: both; 
	FLOAT: left; 
	WIDTH: 100px;
}
.imageblock {
	margin-left: 60px; 
	CLEAR: both; 
	WIDTH: 560px; 
	PADDING-TOP: 10px; 
}
</style>
</head>

<body>
<div class="content">

  <div class="imageblock"><div class="galleryimages"><img
src="https://bugzilla.mozilla.org/attachment.cgi?id=177245" alt="San"
border="0" width="100" ></div></div>
  
  <div class="imageblock"><div class="galleryimages"><img
src="https://bugzilla.mozilla.org/attachment.cgi?id=177245" alt="Tec"
border="0" width="100"></div></div>
  
</div>
Attached file testcase 2 (obsolete) —
'float: left' added:

.content {
	float: left;
	PADDING: 5px 20px 20px 20px; 
	WIDTH: 620px;  
	BACKGROUND-COLOR: lime;
}
Keywords: testcase
Attached file minimal testcase 1
Attached file minimal testcase 2
Attachment #177246 - Attachment is obsolete: true
Attachment #177247 - Attachment is obsolete: true
confirming: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8b2) Gecko/20050312

minimimal testcase 1:

.content {
	PADDING: 5px 20px 20px 20px; 
	WIDTH: 220px;  
	BACKGROUND-COLOR: lime;
}
.imageblock {
	FLOAT: left; 
}

  <div class="content">
	<div class="imageblock">
		<img src="https://bugzilla.mozilla.org/attachment.cgi?id=177245" alt="San"
border="0" width="100" >
	</div>
  </div>
Status: UNCONFIRMED → NEW
Ever confirmed: true
Mozilla's rendering is correct.  see comments in the dupe

*** This bug has been marked as a duplicate of 210703 ***
Status: NEW → RESOLVED
Closed: 20 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: