[css] float buiten box

[Verwijderd]

Hallo,

Ik ben bezig eindelijk eens een fatsoenlijke setup te maken om onze huidige site te laten voldoen aan de W3C conventies.

Nu ben een paar dingen aan het proberen om te kijken hoever we dit op onze huidige site kunnen doorvoeren. Zodat we ook een berg positionerende tables kunnen vervangen door nette div's.

Een mooie layout-mogelijkheid van div-jes is de property 'float'. Nu wil ik niet altijd een float hebben die midden op de pagina float, maar vaak ook binnen een parent-div. Dit gaat allemaal best netjes, totdat de inhoud van het floatende element hoger wordt dan het de resterende inhoude van het parent element. In dit geval begint de geneste div buiten de parent-div te raken, of ebetr gezegd, de parent div wordt niet hoog genoeg om de geneste div helemaal te bevatten.

Een voorbeeld:

code:

<div style="border:1px solid black">
    <div style="float:right;width:150px;height:150px;border:1px solid black">hoog plaatje</div>
    resterende tekst die niet al te lang is.
</div>

Dan verwacht ik zoiets als dit:

code:

+-----------------------+
| kleine       +-------+|
| tekst        |plaatje||
|              |       ||
|              |       ||
|              +-------+|
+-----------------------+

maar het wordt:

code:

+-----------------------+
| kleine       +-------+|
| tekst        |plaatje||
+--------------|       |+
               |       |
               +-------+

waarbij dus de box van de child-div buiten die van de parent-div valt.

Dit is niet echt een browser issue, want hij doet dit bij MSIE6, Opera7, en FireFox0.8.

Vergeet ik hier 1 essentiële property van een van de twee divs?

[André]

Misschien heb je hier wat aan:

http://www.cs.hmc.edu/~mbrubeck/clear-after/

[disjfa]

André, in IE zou je de clear niet eens nodig hebben. Moet je voor de gein een keer zijn code + clear bekijken in IE. (in opera/mozilla werkt t wel gewoon idd)

Ik vind het iig beetje vaag.

[Verwijderd]

dit is gewoon wat je verwacht, want een float haalt je box uit de flow, dus je container trekt zich er niks meer van aan. Enige methode die ik hiervoor ken is idd die spacer div erbij plakken

[André]

Of anders moet je niet floaten maar alignen.

[Verwijderd]

Aha, dank jullie wel voor jullie antwoorden.

Een div alignen binnen zijn box heeft niet echt veel effect. De float gewoon op right houden met onderaan de parent div een laatste div zetten met clear:both werkt wel.

Ik heb nu nog wel wat side effects, maar ik ga eerst eens kijken hoe consistent deze effecten zijn in meerdere browsers.

Ik ben nogal in de ontwenningsfase..maar ik houd vast en gebruik nog nergens tables (waar het niet logischerwijs noodzakelijk is).

Voor de volledigheid, en om aan te geven dat ik even beter had moeten zoeken:
http://www.w3.org/TR/CSS2/visuren.html#floats

[ Voor 14% gewijzigd door Verwijderd op 13-02-2004 16:26 . Reden: link toegevoegd ]

[F97]

http://www.complexspiral.com/publications/containing-floats/

(Of ben ik al te laat?)