0

I have a web page that uses float: left and clear left to stack columns.
This page works fine on firefox but not on ie8.
Columns are like this:
xxx
12
34

xxx
56
78
90

Where each number or xxx represents a div. Odd numbers have float : left; clear: left;, and even number only have a float left;. The xxx represents another div with only clear: left;.

On ie8, however:

xxx
124
3

xxx
5680
7
9

Note that the divs are found in the code in the order of the first example. The float: left;'s are going about the cleared elements!
However, notice once we hit an xxx it is reset. Therefore I assume one way to fix it would be insert a blank div that is only clear: left;ed in front of the odd numbers. But I do not want to do this! Isn't there a sane way to accomplish this in both browsers?

I can post a url if necessary.

thanks,
chris

5
Contributors
7
Replies
8
Views
8 Years
Discussion Span
Last Post by dipak_passion
0

I can confirm adding the empty divs fixes the problem, and I can also confirm it looks stupid.

0

Can you either post some code or a URL ? Would make it easier for me to understand what you are describing.

0

cj, have you tried adding a clear: right property to the even numbered divs? and clear: both for the xxx.

0

CJ,

Maybe you want something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.oddEvenWrapper { width:150px; }
.oddEvenWrapper h1 { margin:2px 0; font-size:12pt;; }
.odd { float:left; clear:left; }
.even { float:right; clear:right; }
</style>
</head>

<body>

<div class="oddEvenWrapper">
	<div class="odd"><h1>Odds</h1></div>
	<div class="even"><h1>Evens</h1></div>

	<div class="even">124</div>
	<div class="odd">3</div>
	<div class="even">5680</div>
	<div class="odd">7</div>
	<div class="odd">9</div>
	<div class="odd">2009</div>
</div>

</body>
</html>

Floats are pretty rubbish for aligning numeric data. float:left aligns the most significant digit while float:right aligns the least significant digit (which may or may not be to the right of the decimal point). The human eye likes alignment of the units column.

Airshow

0

CJ,

Floats are pretty rubbish for aligning numeric data. float:left aligns the most significant digit while float:right aligns the least significant digit (which may or may not be to the right of the decimal point). The human eye likes alignment of the units column.

Airshow

He isn't looking for a way to place significant digits (or at least, he didn't say it in his post). Just a way to align the divs properly. He used the odd-even numbering to show that each row should have 2 divs, and that the 'odd' numbered divs (or the first ones in the row) should align to the left, while the even numbered divs should sit next to the odd divs. And that no extra 'third' div should share their row. =)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.