Posted by Jonathan N. Little on 06/13/06 13:28

fred.haab@gmail.com wrote:
> Jonathan N. Little wrote:
>> Simpler solution and only extra DIV I needed was the nested for the
>> submit button because of IE's lack of selector support, also converted
>> to proportional sizing to scale with font is zoomed, your method will
>> break...
>
> Your workaround is fine, perhaps better than mine... but I already had
> a work around, and the question was why it's happening (is it me or
> Firefox/Opera that's got it wrong, and why).

It is you and IE that is wrong. Floats are supposed to break out of the
containing block so that a floated block can knock out more than one
non-floated block

+-----------------+
| Block 1 |
| |
|+------+ |
|| | |
+|Block |---------+
| 2 |
+| |---------+
|| | |
|+------+ |
| |
| Block 3 |
+-----------------+

Block 1 & 3 are standard non-floated paragraphs of text. With in Block 1
there is a DIV with an image and caption which is floated left. If its
height extends beyond the end of Block 1 It should displace both Block 1
& 3 as crudely illustrated above. I should not expand Block 1 nor push
down Block 3 like below unless Block 3 has "clear: left;" applied

+-----------------+
| Block 1 |
| |
|+------+ |
|| | |
+|Block |---------+
| 2 |
| |
| |
+------+
+-----------------+
| |
| |
| |
| |
| Block 3 |
+-----------------+

One should try to avoid replacing overly complex nesting of TABLEs for
layout with overly complex nesting DIVs! Getting a deeper understanding
of CSS can eliminate the need for unnecessary "presentational" DIVs and
SPANs. I am constantly amazed at ho much I can strip out and make the
markup leaner and still be very flexible. IE of course is usually the
fly in the ointment that necessitates either an added container or class
definition.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]