[xhtml/css] Klopt het wat overflow hier doet?

[DPLuS]

Het gaat hier even om het floatmodel:

Uit: http://www.positioniseverything.net/floatmodel.html :

Float model? What's that?
Okay, here is a simple test concerning how static elements interact with floats. According to the W3C specifications, when a floated element is directly followed by a static element (one that is normally flowed), then first, the float will be displayed against the left edge of the containing element (in this case the 'body' element), and then the static element will also display against that same edge, and at the same vertical height as the float.

The float should overlay the static element, unless the static element has a left margin that moves it out to the right, and out from behind the float. The static element might also be 'cleared' (clear:left or clear:both), which would put it below the level of the float.

In IE7 gaat het dus mis: als je een float definieert en daarna een statische div, plakt 'ie de div achter de float, terwijl de statische div eigenlijk linksboven dient te beginnen.

Maar nu wil ik juist dat effect realiseren: een statische DIV laten beginnen waar de float ophoudt,
toevallig stuitte ik op het gebruik van overflow: auto; en in FireFox kreeg ik toen hetzelfde effect als in IE7: de div met overflow: auto||hidden begon daar, waar de float ophield.

Voorbeeld:
Hier de float en statische div zonder overflow: auto, de statische div dient volgens W3C hier te beginnen waar de float begint (FF2 gaat goed, IE7 niet):
http://212.204.240.93/uploads/htdocs/float_example.html

En hier de float en statische div, waar de laatstgenoemde een overflow: auto heeft gekregen.
Wat er nu gebeurt in beide browsers is dat de statische div nu begint, waar de float eindigt:
http://212.204.240.93/uploads/htdocs/float_example2.html

Mijn vraag is nu: Is het volgens het W3C de bedoeling dat de statische DIV met overflow: auto dient de beginnen waar de float ophoudt?
Het enige dat ik kon destilleren uit de documentatie is dat alleen de inhoud geclipt dient te worden bij een overflow, en niet dat de div pas dient te beginnen na de float?!

[crisp]

quote: http://www.w3.org/TR/CSS21/visuren.html#floats

The margin box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.

Oftewel: die behavior is toegestaan, maar is optioneel

[DPLuS]

OK, dan nog iets anders:

In internet explorer 7 schuift de main-div onder de float als de viewport te klein wordt om ze beiden op 1 regel te houden.

In FireFox 2 echter, blijft de rechter "main"-div netjes achter de float, ook al wordt het venster geresized.

Dat effect wil ik ook in FF2 realiseren,
ik dacht er met een "white-space: nowrap;" op de html/body-tag vanaf te kunnen komen, maar dat werkt dus niet.
Ook een wrapper-div met die CSS-rule wil niet werken.

Kan ik dit wel voorelkaar krijgen??

[BasieP]

wat wil je nou precies bereiken? het effect van IE of van FF? je zegt namelijk dat je het effect van IE in FF wilt realiseren, maar zegt dat FF het 'netjes' doet...
dus wat is het nou?

met een wrapper div zou hij iig niet meer moeten wrappen zoals IE doet.
je container (wrapper div) is namelijk dan groot genoeg om beide elementen te laten zien naast elkaar

[ Voor 32% gewijzigd door BasieP op 19-04-2007 15:53 ]

[crisp]

In dat geval moet je je .main ook gewoon float:left geven

[DPLuS]

Hmm, een voorbeeld zegt meer dan 1000 woorden:
http://212.204.240.93/uploads/htdocs/stripped_2.html

Zoals je ziet heb ik hier 3 divjes die van belang zijn:

2x float: left (blauwe achtergrond (210px width) + inklap-div (6px width))
1x statisch (rechterkant, die moet de resterende ruimte opvullen)

Ik wil dat die divjes hoe dan ook altijd achterelkaar blijven staan!
Zo mogen dus niet onder elkaar komen te staan, aangezien de body: overflow: hidden is.

Dit voorbeeld vormde de basis voor mijn eerste vraag trouwens.

Wat ik nu gedaan heb om dat leuke inklap-uitklap effect te realiseren is de eerste 2 divjes floatable gemaakt.
Anders schuift de rechterdiv niet mee als het menu ingeklapt wordt.

Tot nu toe rendert dit goed op IE6, IE7 en FF2.

Is dit de beste methode volgens jullie, of hebben jullie nog andere ideeën?