float i css - forklaring

Jeg synes nu, at det virker som det skal, med følgende kode:

<div style="float: left; width: 25%;">
nummer 1
</div>

<div style="float: left; width: 25%;">
nummer 2
</div>

<div style="clear: both;">
bund
</div>

Nu bruger du heller ikke den angivne kode, som jeg skrev.. :)

- Men at sætte indholdet i selve elementen, som indeholder clear: both'en, er det den eneste mulighed for at lade det efterfølgende have sin egen linie (og altså ikke blive indblandet i de tidligere elementer med float's)?

Det er sådan set lige meget, om "bund" er inde i den clear-div'en, eller efter den:

"bund" står nederest.

Hvis du fjerner clear, vil den stå ved siden af.

Jeg har tilføjet en rød border, så du kan se boksen:

<div style="float: left; width: 25%; border:1px solid #ff0000;">
nummer 1
</div>

<div style="float: left; width: 25%; border:1px solid #ff0000;">
nummer 2
</div>

<div style="clear: both; border:1px solid #ff0000;"></div>

bund

Som du kan se, er bund stadig i bunden, og ikke ved siden af de to andre divs.

PS:

Det er ikke særligt smart at bruge "Lorem...", da du så ikke kan se hvilken en af "Lorem..." der er hvor.. :-)

Det er derfor jeg bruger 3 forskellige strenge: nummer 1, nummer 2, bund

:-)

Jeg har testet koden i: Opera v9.21, Internet Explorer v6 SP2, FireFox v2.0.0.4

Tester du med Internet Explorer 7 ?

Hvis ja, har du husket doctype i toppen af siden?

Ja.. Kan godt se det virker nu - mener bare at lignende flere gange har resulteret i at den ryger med op ved siden af - i firefox..

FF plejer refreshe/reloade siden efter x antal ms.. det kan være at den ikke har gjort det, de gange hvor det så forkert ud..

Dette giver foreksempel denne "fejl" som jeg snakker om:

<!--

<div style="float: left; width: 19%; text-align: center; padding: 10px;">
Lorem1
</div>

<div style="float: left; width: 19%; text-align: center; padding: 10px;">
Lorem2
</div>

<div style="float: left; width: 19%; text-align: center; padding: 10px;">
Lorem3
</div>

<div style="float: left; width: 19%; text-align: center; padding: 10px;">
Lorem4
</div>


<div style="display: none; clear: both;"></div>

Dette skal være under de 4 tidligere elementer

-->

Det er ikke en fejl. Når du bruger display:none, frigøres pladsen som div'en normalt ville bruge (så det er som om den ikke længere eksisterer), så andre elementer kan bruge den.

Så den er god nok.

Okey, underligt. Kan se at dette virker nu - har bare nogle andre sider, hvor jeg har lagt en display: none; ind, hvorefter det stadig virker, og fjernede den "smule" plads den alligevel fyldte (cirka 2px i højde). Er der nogen anden måde, hvorpå man kan få div'en til ikke at tage noget plads (altså ikke engang 2px i højde), og stadig bevare sin clear: both?

Du burde kunne bruge display:inline; eller i kombination med margin:0px;.

Inline løste problemet - dvs. du gerne må lægge et svar. Og tak for den hurtige respons.. :)

Det var så lidt :-)