PDA

View Full Version : Float issue in Firefox

bengaltgrs
06-18-2008, 08:30 PM
I have one container div which has 3 divs inside of it, and all of the divs inside have the float:left attribute. I would expect the container div to maintain a height consistent with the height of it's contained divs, which IE does just fine. FF however, will not maintain a hieght of the contained divs resulting in it's height remaining at 0. The contained divs will be filled with dynamic content, and therefore the container div should expand to their size, regaurdless of content. Here is some code to show what I'm doing now:


<div style='border:1px solid black; width:320px;'>
<div style='width:100px; margin-left:5px; float:left;'>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
</div>
<div style='width:100px; margin-left:5px; float:left;'>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
</div>
<div style='width:100px; margin-left:5px; float:left;'>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
</div>
</div>



Does anyone know how to fix this?
coothead
06-18-2008, 09:44 PM
Hi there bengaltgrs,

Do not believe that because IE displays it just fine, that it is displaying it correctly. ;)
To get compliant browsers like Firefox, Opera or Safari to display it as you would like requires the highlighted rule...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style type="text/css">
#container {
border:1px solid #000;
width:320px;
overflow:auto;
}
.box {
width:100px;
margin-left:5px;
float:left;
font-size:0.8em;
}
</style>

</head>
<body>

<div id="container">
<div class="box">
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
</div>
<div class="box">
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
</div>
<div class="box">
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
adasdasd as dasd asd asd asd asd asd asd asd asd asd a<br>
</div>
</div>

</body>
</html>

coothead
ahallicks
06-18-2008, 11:58 PM
Actually, that would probably create scrollbars in IE. You're better off using overflow: hidden

Google 'clearing floats' as this is what your problem will be here. If you don't clear the floats after the container then the container will not 'contain' the floated elements (at least in Standards Compliant browsers).