IE float bug

**markbrown4** · Oct 7, 2007 22:14

Hi,

I have a list like the following

# 1 style="float: left"
# 2 style="float: left"
# 3 style="float: left; clear: left"
# 4 style="float: left;"
# 5 style="float: left; clear: left"
# 6 1 style="float: left;"

The 'columns' are 50% -1px wide.

#1 has a greater height than #2
In FF, #4 and #6 are floated and sit happily next to their cleared neighbours.
In IE the float Jumps upwards and fills the gaps in the columns.

How do I prevent this?

Thanks,

**markbrown4** · Oct 7, 2007 23:00

A test case:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.floats { overflow: hidden; width: 100&#37;; background: #F93; }
.floats div { float: left; width: 50%; margin-left: -1px; background: #F93; border-top: 1px solid #FFF;}
.clear { clear: both }
</style>
</head>

<body>
<div class="floats">
  <div>1<br>is longer than 2</div>
  <div>2</div>
  <div class="clear">3<br>
  is longer than 4</div>
  <div>4</div>
  <div class="clear">5</div>
  <div>6</div>
</div>
</body>
</html>

**DaveWoods** · Oct 8, 2007 02:57

Had the same problem in the past.

I've usually got around this by adding a <div> for the row itself to group the two row items together.

Alternatively, if it makes semantic sense for there to be a line-break then I'd be tempted to simply add a <br> after the row ends.

Code:

<div class="floats">
  <div>1<br>is longer than 2</div>
  <div>2</div><br>
  <div class="clear">3<br>is longer than 4</div>
  <div>4</div><br>
  <div class="clear">5</div>
  <div>6</div>
</div>

Neither are ideal though and I know people are a bit weary of overusing the <br> tag as it's been abused in the past but seeing as this isn't using it instead of using padding/margin and is actually being used to cause a line break then I don't personally see anything wrong with using it in this situation.

**markbrown4** · Oct 8, 2007 03:11

Hi Dave,

That's a decent solution, I just ended putting in clearing div's in between in defeat - I'll change them to line breaks.

I'm interested if there's some CSS magic to twist IE's arm though..

Thanks,

**Paul O'B** · Oct 8, 2007 03:29

Hi,

IE has many bugs like this and the only solution is as CSSwiz said in that you need to clear both floats with a 100% wide clearer.

Personally I would wrap the rows in a div (or a more semantic element depending on the situation) because once you put a break in the html you can't alter it from the stylesheet.

**DaveWoods** · Oct 8, 2007 03:58

Originally Posted by Paul O'B

Personally I would wrap the rows in a div (or a more semantic element depending on the situation) because once you put a break in the html you can't alter it from the stylesheet.

I tend to use that solution as well but if you decided that you wanted four items on a row instead of two then you'd still be left with the same problem of tweaking the HTML.

Admittedly, it would probably be a little more flexible in that you could change the width's to stop the clearing but I don't think either solution is perfect unfortunately and in reality would probably mean that you'd have to alter the HTML.

I do usually wrap the row in a div though as it does allow a little more flexibility for introducing things like borders along the bottom of the row for example or if you want the row to be a different colour from the container div.

User Tag List

Thread: IE float bug

Thread Tools

Display

IE float bug - Moving upwards because there's room

Bookmarks

Bookmarks

Posting Permissions