Float in foxfire does not work properly.

**Phrank** · Mar 7, 2009 18:59

I have an outside container called pagecontainer and an inside container called main. I put a container/div in main called leftside and as soon as I add the float left the div extends down past the pagecontainer and main div's. It should just expand the pagecontainer and main divs to hold the leftside div right?

It works fine in IE7 but not foxfire and google chrome.

What am I missing here? Any help would be greatly appreciated.

--------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}
html {
color:black;
margin: 0 auto;
text-align: center;
}
body {
color:black;
background-color:black;
text-align: center;/* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #pagecontainer selector */
}
#pagecontainer {
position:relative;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
border:thin solid #9F0;
width:98%;
background-color:white;
height:auto;
}
#main {
position:relative;
background-color:white;
border: thick solid yellow;
width:96.65%;
height:auto;
}
#leftside {
background-color:#cfcfcf;
border: thick solid pink;
position:relative;
float:left;
width:157px;
}
#leftspacer {
position:relative;
background-color:#bcbcbc;
background-position:center;
height:15px;
width:157px;
text-align:center;
}
#ccname {
height:60px;
width:157px;
background-color:#ABABAB;
}
</style>
</head>

<body>
<div id="pagecontainer">
pagecontainer
<div id="main">
main<br />
<div id="leftside">
Leftside
<div id="leftspacer">
</div>
<div id="ccname">
cclogo
</div>
</div>
Line 2<br />
Line 3<br />
</div>
</div>
</body>
</html>

**Centauri** · Mar 7, 2009 19:51

No, Firefox is handling this correctly according to the specs. As a float is taken out of the flow of the document, a container should not automatically surround the float unless forced to do so - IE gets this wrong when HasLayout is triggered on the container. To force the container to surround the float, the overflow property can be used :

Code:

#main {
	position:relative;
	background-color:white;
	border: thick solid yellow;
	width:96.65%;
	height:auto;
	overflow: hidden;
}

**glenngould** · Mar 7, 2009 20:00

Edit:

Centauri is right. See if you add a non floated element just after the #leftside you won't need overflow.

HTML Code:

</div><!-- End of leftside --><div style="clear:left"></div>

**Rayzur** · Mar 7, 2009 20:10

And here is a live test-case that progressively explains everything mentioned above.

http://stommepoes.nl/floaties.html

**Ed Seedhouse** · Mar 7, 2009 22:50

"Foxfire"?

**RyanReese** · Mar 8, 2009 14:55

Originally Posted by Ed Seedhouse

"Foxfire"?

I know that some browsers have nicknames.

Internet Exploder

Pooperah.

**Phrank** · Mar 9, 2009 08:12

Sorry I have done alot of foxpro programming over the years. Foxfire just slips out.

User Tag List

Thread: Float in foxfire does not work properly.

Thread Tools

Display

Float in foxfire does not work properly.

Bookmarks

Bookmarks

Posting Permissions