Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

clear:left behaving like clear: both - works in IE

  • 1 reply
  • 2 have this problem
  • 8 views
  • Last reply by cor-el

more options

Using clear:left or clear right doesn't seem to follow the css spec in firefox 3.6. It acts more like clear both.

Here's an example page http://blog.microrollers.com/p/test-firefox-clear-bug.html

This is the code:

<div style="width: 1px; height: 200px; float: right;"></div> <div style="width: 100px; height: 200px; float: right; clear: right; margin: 10px 10px 10px 0; background: red;"></div> <div style="width: 100px; height: 100px; float: left; background: blue; margin: 0 0 10px 10px;"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum est at tellus iaculis faucibus. Donec cursus adipiscing pharetra. Sed ac viverra felis. Phasellus elementum tempor facilisis. Quisque erat eros, ultrices id scelerisque sed, molestie sed turpis. Donec aliquet consequat laoreet. Nunc et sapien magna, vitae porta justo. Integer mattis sagittis luctus. Proin eget sem nec augue laoreet varius eget id augue. Nam odio nunc, malesuada vitae sodales et, tempus quis felis. Cras tempor egestas tellus, non euismod odio viverra et.<br />


The blue box should float in the upper right of the blog post. The red box should float on the left of the blog post and the 1px wide div should push it down 200px so it's in the middle of the post.

If I put the code for the blue box before the code for the red box it displays properly but I can't get it in the template that way. The red code will be in the template the blue box is part of the post.

It works fine in IE but not firefox or chrome. In this case it seems IE is following the spec.

Is there any workaround for this?

Using clear:left or clear right doesn't seem to follow the css spec in firefox 3.6. It acts more like clear both. Here's an example page http://blog.microrollers.com/p/test-firefox-clear-bug.html This is the code: &lt;div style="width: 1px; height: 200px; float: right;"&gt;&lt;/div&gt; &lt;div style="width: 100px; height: 200px; float: right; clear: right; margin: 10px 10px 10px 0; background: red;"&gt;&lt;/div&gt; &lt;div style="width: 100px; height: 100px; float: left; background: blue; margin: 0 0 10px 10px;"&gt;&lt;/div&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum est at tellus iaculis faucibus. Donec cursus adipiscing pharetra. Sed ac viverra felis. Phasellus elementum tempor facilisis. Quisque erat eros, ultrices id scelerisque sed, molestie sed turpis. Donec aliquet consequat laoreet. Nunc et sapien magna, vitae porta justo. Integer mattis sagittis luctus. Proin eget sem nec augue laoreet varius eget id augue. Nam odio nunc, malesuada vitae sodales et, tempus quis felis. Cras tempor egestas tellus, non euismod odio viverra et.&lt;br /&gt; The blue box should float in the upper right of the blog post. The red box should float on the left of the blog post and the 1px wide div should push it down 200px so it's in the middle of the post. If I put the code for the blue box before the code for the red box it displays properly but I can't get it in the template that way. The red code will be in the template the blue box is part of the post. It works fine in IE but not firefox or chrome. In this case it seems IE is following the spec. Is there any workaround for this?

Modified by MicroRoller

All Replies (1)

more options

A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.

You need to register at the mozillaZine forum site in order to post at that forum.
See http://forums.mozillazine.org/viewforum.php?f=25