Float/Clear in IE vs Mozilla

**johnnyp** · Mar 2, 2007 09:17

Hi,

I had the following html code:

Code:

<html>
 <head>
  <style type="text/css">
#container{
 width: 300px;
}
.left {
 float: left;
 clear: left;
}
.right{
 float: right;
 clear: right;
}
  </style>
 </head>
 <body>
  <div id="container">
   <div class="left">Left Content</div>
   <div class="left">Left Content</div>
   <div class="left">Left Content</div>
   <div class="right">On the Right</div>
   <div class="right">On the Right</div>
  </div>
 </body>
</html>

And this works as expected (expected by me that is!) in IE by floating all left boxes from the top on the left and all right boxes from the top on the right, independently of each other. However this does not work on Mozilla.

If I replace this with the following code:

Code:

<html>
 <head>
  <style type="text/css">
#container{
 width: 300px;
}
.left {
 float: left;
}
.right{
 float: right;
}
  </style>
 </head>
 <body>
  <div id="container">
   <div class="left">
   <div>Left Content</div>
    <div>Left Content</div>
    <div>Left Content</div>
   </div>
   <div class="right">
    <div>On the Right</div>
    <div>On the Right</div>
   </div>
  </div>
 </body>
</html>

Then I do in fact get what I want in both browsers but I found it odd that Mozilla would require more superfluous divs to get the layout to work. It also makes it a bit more unintuitive and awkward programmatically because now I have to gather, group and then print out the left and right types of divs . With the first layout (working only in IE) I could just mix these types of divs and print them out as they come out of the database for example with a simple loop, just attaching the right class to the right type.

I have found a solution to my problem but would like to hear feedback for anyone who knows more about this. Is this a bug in one or the other browser? Which is the standards way and is there a reason behind it? Or is there a better solution to the one I found that would allow me to not group my divs in artificial container divs.

Thank you!

**Kravvitz** · Mar 2, 2007 10:05

1) Which doctype are you using?

2) IE is a piece of junk. Don't trust how it displays things. I suggest you read these:
Don’t use IE as your primary testing browser
Unable to get fluid layout working in Firefox
No, Internet Explorer did not handle it properly

**Paul O'B** · Mar 2, 2007 10:41

Hi,

Ie fails to clear properly when you use clear:left and clear:right in that manner which is why they end up as 2 columns when they shouldn't.

Firefox correctly starts the right hand float after the final left hand float has been cleared. Floats start level with the html they align at when that element has cleared elements above.

You should never float multiple elements left and right anyway as this is a recipes for disaster and in the end will involve more code than simply floating whole columns. The content can then be statically positioned inside each column as required and is a more solid way to do this.

Far from mozilla requiring more code, I make it use actually 30 characters less if you do it properly even in that small demo.

Code:

<div id="container">
    <div class="left">
        <p>Left Content</p>
        <p>Left Content</p>
        <p>Left Content</p>
    </div>
    <div class="right">
        <p>On the Right</p>
        <p>On the Right</p>
    </div>
</div>

You don't need the multiple class definitions as in your example and the content should be in semantic containers and not just divs anyway

In the end the result is actually much less code than you used.

Hope it helps

**johnnyp** · Mar 3, 2007 08:01

Hi,

Thanks everyone for your responses.

The doctype I used was:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The vast majority of the visitors to my website use IE so whether I like it or not I have to primarily test on IE, real life, what can you do....

To Paul O'B, thanks for clarifying that Mozilla enforces the standards here and IE works (for me) because of a flaw. But, when I said it took more divs, I meant levels of divs that were not related to content but only there to support layout which I think is something to be avoided if possible - even if it saves some characters. Plus the mixing of left/right, as I said, was very convinient in this case as I did not have to enforce the order in my code. Oh well, what can you do, I will change it so that it works in both browsers.

Thanks again.

**Paul O'B** · Mar 3, 2007 08:32

Oh well, what can you do, I will change it so that it works in both browsers.

I think you will find the individual columns much more robust and usable

. It also makes the code so much easier to follow because the sections are divided into logical parts and kept together rather than being mixed with left and right divs everywhere.

This will also allow you to target inner elements in each column without extra classes and without having to float everything.

There is very rarely a need to float multiple elements left and right and even if you do then there are of course many clearing issues to take into account (as you have discovered).

Simplicity and a logical flow is always best

User Tag List

Thread: Float/Clear in IE vs Mozilla

Thread Tools

Display

Float/Clear in IE vs Mozilla

Bookmarks

Bookmarks

Posting Permissions