Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Left Div overflows containing div in Firefox 2

Status
Not open for further replies.
Glasgow

Glasgow

IS-IT--Management
Jul 30, 2001
1,669
GB
No doubt IE7 is doing something to compensate for a coding error I have made but I can't tie it down. Can anyone tell me why, in FireFox, the two yellow boxes overflow the green box that I hoped would grow with them and contain them as it does in IE7.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>TekTips Test</title>
</head>

<body style="font-family:verdana; font-size:10pt; ">
<div style="width:500px; background-color:green; height:auto; padding:5px">
  <div style="margin:5px; height:auto; background-color:yellow; width:auto; float:left;">
    a<br/>
    a<br/>
    a<br/>
    a<br/>
  </div>
  <div style="margin:5px; height:auto; background-color:yellow; width:auto; float:left;">
    a<br/>
    a<br/>
    a<br/>
    a<br/>
  </div>
</div>
</body>
</html>
Thanks in advance.
 
Sort by date Sort by votes
Add an overflow to your main div:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>TekTips Test</title>
</head>
<body style="font-family:verdana; font-size:10pt; ">
<div  style="width:500px; overflow:auto; background-color:green; padding:5px">  

<div style="margin:5px; background-color:yellow; width:auto; float:left;" >
a<br/>
a<br/>
a<br/>
a<br/>
</div>  

<div style="margin:5px; background-color:yellow; width:auto; float:left;">
a<br/>
a<br/>
a<br/>
a<br/>
</div>
xc

</div>
</body>
 
Upvote 0 Downvote
That does the trick. I should have thought of it!

Thank you very much.
 
Upvote 0 Downvote
Yes, it's good to have the explanation thanks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
754
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
595
tyutghf
tyutghf
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
696
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top