non-cleared div acting like cleared div

Forum Moderators: not2easy

Message Too Old, No Replies

non-cleared div acting like cleared div

float clear div firefox ie

j44p

12:24 am on Nov 17, 2007 (gmt 0)

The following self-contained example renders the way I want in IE 7, but not in Firefox 2. I know Firefox normally does things according to standards. So, the question is, what is the right way to get the current IE rendering to happen in both Firefox 2 and IE 7?

To save you time in figuring this out, here's what the web page looks like in each browser:

IE7:

13
2

FF2:

1
23

Remember I don't want the 3 to clear the 1; I want the 3 to appear to the right of the 1. And, I can't change the order in which the divs appear; I can change only the styles/classes. This also needs to work with arbitrary div content. (As you may have surmised, the "1", "2", and "3" are contrived.)

Thanks.

j44p

12:40 am on Nov 17, 2007 (gmt 0)

I seem to have found the solution at [w3.org...] :

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

What this means is that I have no choice but to re-order the divs.

Xapti

1:29 am on Nov 17, 2007 (gmt 0)

Certainly you have no choice but to re-order the divs. That's the only thing that makes logical sense.
I laughed like mad when I heard you say IE7 rendered such a simple example improperly. Is it really that bad, or was your test case more complicated?
It's god damned scary if a browser can't render an extremely simple float-clear example like that properly...

How have people corrected this for IE?

[edited by: Xapti at 1:34 am (utc) on Nov. 17, 2007]

j44p

5:08 am on Nov 17, 2007 (gmt 0)

Additional requirements I neglected to state earlier:

The text needs to flow around the 3 graphics, as shown in the diagram below. I have 3 variable-sized images and some variable text. Images 1 and 2 always have the same width as each other; image 3 can sometimes be taller than image 1 but is never taller than the sum of the heights of images 1 and 2; and there's always room for the text to flow around the 3 images; but otherwise, the width and height are unknown until the images are pulled from the database.


.___ . ___ 
� . � � . � This text flows
� 1 � � . � around the 3
�___� � 3 � pictures. The
.___. � . � periods merely
� . � �___� compensate for
� 2 � webmasterworld
�___� deleting extra spaces
and aren't meant to be part
of the diagram.

Looks easy, right? The layouts I tried either place picture 3 so its top is aligned with picture 2's top or place picture 2 so its top is aligned with picture 3's bottom.

I don't expect anyone to solve this for me, but it would be nice!

Thanks, everyone.

Xapti

6:46 am on Nov 17, 2007 (gmt 0)

The answer to your problem (which I would not say is easy, takes a bit of thinkin' with the noggin) seems to be to wrap div 1 and 2 in a wrapper div, float it, (and you don't have to bother floating div1 or 2) then float div 3 after. I have not tried without widths and heights set like you mentioned, but it should work for that.
Here's an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
body{background-color:#aaa}
#divwrap{float:left;height:500px;width:200px}
#div1{height:250px;background-color:#0cc}
#div2{height:250px;background-color:#099}
#div3{height:400px;width:200px;background-color:#660;float:left}
</style>
<body>
<div id="divwrap">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
<div id="div3">3</div>
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
Put your Lorem Ipsums here; Put your Lorem Ipsums here; Put your Lorem Ipsums here;
</body>
</html>

j44p

8:23 am on Nov 17, 2007 (gmt 0)

Xapti, thank you very much. That works well.

Related problem: My div1 and div2 are used on other pages as well, not necessarily together, so they need to be able to float separately at times. Do I need to remove "float:right;" from my definitions of div1 and div2 and adjust every instance of div1 and div2 to somehow be contained by another element that has "float:right;"? I'll do it if that's the only way, but it would not be elegant.