Member Avatar for cjmalloy

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
  • 131 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by dipak_passion
Member Avatar for cjmalloy

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

Member Avatar for FeralReason

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

Member Avatar for kanaku

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

Member Avatar for Airshow

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

Member Avatar for kanaku

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. =)

Member Avatar for Airshow

Kanaku,

You clearly understand the OP's problem better than I.

Airshow

Member Avatar for dipak_passion

Ok, please post the URL. It will help best here.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.