"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> writes:
> Så er det klar:
www.hjemmesideskolen.dk/html/testsider/float_dump.asp
Det ser helt rigtigt ud. I de første eksempler mangler der en bredde
på p-elementet (bredde er påkrævet på (non-replaced) floatede
elementer). Opera og Mozilla vælger at den manglende bredde skal være
100%, så der er ikke plads til både højre- og venstre-floaten, og den
venstre-floatede paragraf rykkes ned under den anden. Helt efter standarden.
Internet Explorer har den fejl at den regner 100% bredde til kun at være
det der er plads til til venstre for det floatede billede, så der er plads
til paragraffen der.
Eksemplerne hvor der ikke er float på teksten, er også helt korrekt
opførsel for en float. Floaten lægger sig til venstre, og tekstblokken
lægger sig under den. Inline-elementerne bliver så afkortet for ikke
at overlappe floaten.
Hvis du ikke vil have teksten nede under billedet, så prøv at
sætte en padding-left:115px på paragraffen.
Mere detaljeret:
Med to blokke der begge er float:left (og der er plads til dem begge
på sammelinje) får man effekten:
+--------+-------------+
| | ~~~~~~ |
| | ~~~ |
| | ~~~ |
+--------+ ~~` |
| ~~~ |
+-------------+
De to blokke lægger sig op af hinanden.
Med en blok der er float:left og en anden blok lige ved siden af, så
får man effekten:
+--------+-------------+
| | ~~~~~~ |
| | ~~~ |
| | ~~~ |
+--------+ ~~ |
| ~~~ |
+----------------------+
De overlapper hinanden (mere præcist er blok-elementer fuldstændigt
upåvirket af floats). Det er kun indholdet der bliver skubbet med.
Prøv at se på følgende eksempler:
<div style="float:left;width:100px;height:100px;border:1px solid red;">
</div>
<div style="float:left;width:200px;border:2px solid green;padding:1ex;">
<span style="border:1px solid blue">
BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>
</span>
</div>
<div style="float:left;width:100px;height:100px;border:1px solid red;">
</div>
<div style="border:2px solid green;padding:1ex;">
<span style="border:1px solid blue">
BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>
</span>
</div>
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:
http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'