---

Jeg har en div-blok med et billede i. Jeg vil gerne have at teksten
"flyder" (float'er) om billedet, derfor skriver jeg:

<div>
<img style="float:left" src="..." />
ARGH!
</div>

Problemet er at det ikke bare er teksten "ARGH!" der flyder om
billedet, men også div-blokken. Det undrede mig en del at se, at
både IE, Firefox og Opera opførte sig sådan. Det er da lidt noget
rod, at float æder forældre-objekter. Så kan man da nærmest ikke
bruge det til en skid...?

Se problemet: http://home19.inet.tele.dk/stokholm/usenet/moeg.html

Findes der en god kur, eller må jeg bare droppe tanken om at have
("flydende") billeder i mine div-objekter?

---

Lars Stokholm skriblede bla:
>
> Findes der en god kur, eller må jeg bare droppe tanken om at have
> ("flydende") billeder i mine div-objekter?

#billede1 {
float:left;
width: 160px;
}
--------------------------------------------------
<div id="billede1">
<img src="images/billede.jpg" alt="tekst"/>
</div>

Virker fint her.
Ved ikke om det er det du mener


--

Mvh. John
www.jp-web.dk
www.johns-web.dk
www.john.jp-web.dk

---

Lars Stokholm skrev:
> Findes der en god kur, eller må jeg bare droppe tanken om at have
> ("flydende") billeder i mine div-objekter?

Følgende skulle kunne gøre det: (utestet)

<div style="border: 1px solid black;">
<img style="float: left;" src="http://www.google.com/logos/newyear05.gif"
/>
ARGH!
<div style="clear: both;"></div>
</div>

- Bjarne

---

Bjarne skrev:

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

Genialt - tak! Er det mon den smarteste måde at gøre det på?

---

Lars Stokholm wrote:
>
>><div style="clear: both;"></div>
>
>
> Genialt - tak! Er det mon den smarteste måde at gøre det på?

Din opfattelse af problemet er forkert ... div-blokken floater ikke uden
om billedet. Havde den gjort det ville den sorte boks ikke starte helt
ude til venstre, men lige til højre for billedet. Så det er altså kun
teksten der floater og ikke forældre-elementet.

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

Ovenstående måde giver ekstra HTML-kode, hvilket jeg ikke syntes er
smart, da jeg syntes man som web-udvikler altid bør stræbe på at
adskille indhold og præsentation.

En ren CSS løsning vil være at give div blokken med den sorte border en
fast højde... men det modstrinder ideen om at man bør lade indholdet
bestemme højden på en boks og ikke omvendt.

En noget bedre løsning ville være at floate div-blokken og give blokken
en fast width. Hvilket virker fint til faste layouts, men desværre ikke
ved flydende layouts.

Benytter du dig af flydende layouts kan nedenstående CSS-hack løse
problemet for dig, vel og mærke uden ekstra HTML-kode. Så kan det altid
diskuteres om CSS-hacket er pænt eller ej.

http://www.positioniseverything.net/easyclearing.html


--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

---

Martin Hintzmann Andersen skrev:

> Din opfattelse af problemet er forkert ... div-blokken floater ikke
> uden om billedet. Havde den gjort det ville den sorte boks ikke starte
> helt ude til venstre, men lige til højre for billedet. Så det er altså
> kun teksten der floater og ikke forældre-elementet.

Jah, okay. Men under alle omstændigheder rager billedet udenfor
div-blokken, og jeg forstår ærligt talt ikke idéen med det. Måske
er jeg sådan en Windows-gut de beskriver på PIE. :)

> <div style="clear: both;"></div>
>
> Ovenstående måde giver ekstra HTML-kode, hvilket jeg ikke syntes er
> smart, da jeg syntes man som web-udvikler altid bør stræbe på at
> adskille indhold og præsentation.

Jeg er enig, men i betragtning af hvor simpel løsningen er, i
forhold til nedenstående, så tror jeg alligevel jeg vælger den
usmarte løsning. :) Det er selvfølgeligt lidt ærgeligt, men jeg
er alligevel den eneste der kommer i kontakt med koden.

En dag når IE også kan følge med, kan jeg så skifte metoden ud.

> Benytter du dig af flydende layouts kan nedenstående CSS-hack løse
> problemet for dig, vel og mærke uden ekstra HTML-kode. Så kan det
> altid diskuteres om CSS-hacket er pænt eller ej.
>
> http://www.positioniseverything.net/easyclearing.html

Men tak alligevel. Interessant side.

---

Lars Stokholm wrote:
>
> Jah, okay. Men under alle omstændigheder rager billedet udenfor
> div-blokken, og jeg forstår ærligt talt ikke idéen med det. Måske
> er jeg sådan en Windows-gut de beskriver på PIE. :)
>

Sådan har float (og align) altid virket.

Hos PIE har de en artikel om hvordan float virker. Den kan nok bedre
forklare, hvorfor float er som det er.
http://www.positioniseverything.net/articles/float-theory.html

>
> Jeg er enig, men i betragtning af hvor simpel løsningen er, i
> forhold til nedenstående, så tror jeg alligevel jeg vælger den
> usmarte løsning. :) Det er selvfølgeligt lidt ærgeligt, men jeg
> er alligevel den eneste der kommer i kontakt med koden.
>
> En dag når IE også kan følge med, kan jeg så skifte metoden ud.
>

Det er bare surt at indsætte x-antal ekstra div blokke som skal cleares.
Ønsker du ved et evt. redesign eller når IE kan følge med at lave det om
skal du fjerne det ekstra HTML-kode fra alle dine sider igen.

Der er CSS-hacket noget nemmere... her skal du kun fjerne det 1 gang i
dit stylesheet.

Easy-clearing CSS-hacket er jo kun til hvis du benytter flydende layout.
Gør du det? For ellers kan de to alternative løsninger jeg gav dig også
løse problemet.

Men det er jo dit valg
Jeg svarede bare på om der var en smartere måde end den Bjarne gav
dig... og der gav jeg dig hele 3 alternativer.


--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

---

Martin Hintzmann Andersen skrev:

> Hos PIE har de en artikel om hvordan float virker. Den kan nok bedre
> forklare, hvorfor float er som det er.
> http://www.positioniseverything.net/articles/float-theory.html

Takker.

> Der er CSS-hacket noget nemmere... her skal du kun fjerne det 1 gang
> i dit stylesheet.

Jah... Ah hell, jeg lytter til dig så. Tilfreds? :D

> Easy-clearing CSS-hacket er jo kun til hvis du benytter flydende
> layout. Gør du det?

Jep.

> Jeg svarede bare på om der var en smartere måde end den Bjarne gav
> dig... og der gav jeg dig hele 3 alternativer.

I know, I know. :) Og jeg er taknemmelig.

---

Lars Stokholm wrote:
>
> Jah... Ah hell, jeg lytter til dig så. Tilfreds? :D
>

Yippee! one converted ;-D

Nej, pjat til side. Du skal ikke vælge metode udfra at gøre mig
tilfreds, men udfra hvad der virker bedst for dig.


--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

---

Martin Hintzmann Andersen skrev:

> Nej, pjat til side. Du skal ikke vælge metode udfra at gøre mig
> tilfreds, men udfra hvad der virker bedst for dig.

Det var også bare for sjov, men jeg er konverteret, så du kan
tillade dig at være glad. :)

---

Martin Hintzmann Andersen skrev:

> Benytter du dig af flydende layouts kan nedenstående CSS-hack løse
> problemet for dig, vel og mærke uden ekstra HTML-kode. Så kan det altid
> diskuteres om CSS-hacket er pænt eller ej.
>
> http://www.positioniseverything.net/easyclearing.html

Det er ikke helt ligetil at få det til at virke. Bundmargin ignoreres
på mit billede: http://home19.inet.tele.dk/stokholm/usenet/moeg2.html
i IE. I Firefox og Opera er den fin nok.

Idéer?

---

Lars Stokholm wrote:
>
> Det er ikke helt ligetil at få det til at virke. Bundmargin ignoreres
> på mit billede: http://home19.inet.tele.dk/stokholm/usenet/moeg2.html
> i IE. I Firefox og Opera er den fin nok.
>
> Idéer?

Ja, skriv det som det står i artiklen

Du har 0px på din height i "* html div.content"... det skulle have være 1%

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

---

Martin Hintzmann Andersen skrev:

>> Det er ikke helt ligetil at få det til at virke. Bundmargin ignoreres
>> på mit billede: http://home19.inet.tele.dk/stokholm/usenet/moeg2.html
>> i IE. I Firefox og Opera er den fin nok.
>>
>> Idéer?
>
> Ja, skriv det som det står i artiklen

*fløjter* Hvad kan man sige? Jeg elsker pixels. ;)

> Du har 0px på din height i "* html div.content"... det skulle have
> være 1%

Det gjorde desværre ingen forskel, jeg har uploadet igen.

---

Lars Stokholm wrote:

> Det gjorde desværre ingen forskel, jeg har uploadet igen.

En anden mulig løsning på dit float-problem kunne være min-height, som IE
desværre heller ikke uden lidt hjælp forstår.

Den teknik - inklusive hack for IE - har jeg vist her:

http://hjemmesideskolen.dk/html/testsider/minheight.asp

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk

---

Erik Ginnerskov skrev:

> En anden mulig løsning på dit float-problem kunne være min-height,
> som IE desværre heller ikke uden lidt hjælp forstår.

Jo tak, men så skal jeg kende billedets højde, eller bare lave div'en
"stor nok". Det er ikke nogen særligt flot løsning.