HTML and CSS

Floats going above clears

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2009

Posts: 3

Reputation: cjmalloy is an unknown quantity at this point

Solved Threads: 0

cjmalloy

Offline

Newbie Poster

Floats going above clears

Jul 7th, 2009

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

•

Join Date: Feb 2009

Posts: 3

Reputation: cjmalloy is an unknown quantity at this point

Solved Threads: 0

cjmalloy

Offline

Newbie Poster

Re: Floats going above clears

Jul 8th, 2009

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

•

Join Date: May 2009

Posts: 23

Reputation: FeralReason is an unknown quantity at this point

Solved Threads: 0

FeralReason FeralReason is offline

Offline

Newbie Poster

Re: Floats going above clears

Jul 8th, 2009

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

•

Join Date: Jan 2007

Posts: 276

Reputation: kanaku is on a distinguished road

Solved Threads: 15

kanaku

Offline

Posting Whiz in Training

Re: Floats going above clears

Jul 11th, 2009

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

If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.

Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.

•

Join Date: Apr 2009

Posts: 857

Reputation: Airshow is on a distinguished road

Solved Threads: 122

Airshow

Offline

Practically a Posting Shark

Re: Floats going above clears

Jul 13th, 2009

CJ,

Maybe you want something like this?

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<!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

50% of the solution lies in accurately describing the problem!

•

Join Date: Jan 2007

Posts: 276

Reputation: kanaku is on a distinguished road

Solved Threads: 15

kanaku

Offline

Posting Whiz in Training

Re: Floats going above clears

Jul 14th, 2009

•

Originally Posted by Airshow

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