Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 742

Jul 7th, 2009

Floats going above clears

Expand Post »

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

Similar Threads

Three column div problems - breadcrumb bar and footer in HTML and CSS
mixing floats and ints...(don't ban me please for being such a noob) in C++
Rounding and displaying floats in C
help plz in C++
clears screen instead of scrolling. in Assembly

cjmalloy

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Feb 2009

Permalink

Jul 8th, 2009

Re: Floats going above clears

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

cjmalloy

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Feb 2009

Permalink

Jul 8th, 2009

Re: Floats going above clears

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

FeralReason

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

32 posts
since May 2009

Permalink

Jul 11th, 2009

Re: Floats going above clears

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

kanaku

Reputation Points: 70

Solved Threads: 15

Posting Whiz

Offline

378 posts
since Jan 2007

Permalink

Jul 13th, 2009

Re: Floats going above clears

CJ,

Maybe you want something like this?

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

Airshow

Sponsor

Reputation Points: 300

Solved Threads: 357

WiFi Lounge Lizard

Offline

2,523 posts
since Apr 2009

Permalink

Jul 14th, 2009

Re: Floats going above clears

Click to Expand / Collapse Quote 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. =)

kanaku

Reputation Points: 70

Solved Threads: 15

Posting Whiz

Offline

378 posts
since Jan 2007

Permalink

Jul 14th, 2009

Re: Floats going above clears

Kanaku,

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

Airshow

Airshow

Sponsor

Reputation Points: 300

Solved Threads: 357

WiFi Lounge Lizard

Offline

2,523 posts
since Apr 2009

Permalink

Jul 15th, 2009

Re: Floats going above clears

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

dipak_passion

Reputation Points: 11

Solved Threads: 1

Light Poster

Offline

34 posts
since Dec 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Within a <td>, how do I call a Javascript function on ANY event?

Next Thread in HTML and CSS Forum Timeline: Table row color altering based on conditions

DaniWeb Message

Cancel Changes

User Name
Password