CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

snuf Nybegynder

10. oktober 2005 - 17:30 Der er 12 kommentarer og
1 løsning

Div Float Problem

Jeg har forgæves søgt en løsning på nedenstående problem med 'float'. Mit spørgsmål er kort fortalt:

Hvorfor udvider en 'container-div' sig i Firefox ikke automatisk vertikalt, når man sätter 'flow:left' på de indeholdende 'div's?

En uddybelse:

Jeg har en centreret ydre 'div' (#container) der indeholder to 'div's; #one og #two. I Explorer fungerer dette tilsyneladende som det skal. Men i Firefox "klapper" #container sammen. Det er som om at #container ikke registrerer indeholdet.

Eksemplificeret: www.snuf.dk/eksperten

Hvad gør jeg forkert, og hvad er den rigtige måde at løse problemet på, som fungerer i alle browsers?

På forhånd tak.

Synes godt om

snuf Nybegynder

10. oktober 2005 - 17:37 #1

Koden:

<style>

#container {
width: 500px;
margin-right:auto;
margin-left:auto;
border: #000 solid 1px;
background-color: PaleGreen;
}

#one {
float: left;
width: 150px;
margin: 0px;
border: #000 solid 1px;
background-color: orange;
}

#two {
float: left;
width: 300px;
margin: 0px;
background-color: pink;
border: #000 solid 1px;
}

</style>

<body>

<div id="container">

<div id="one">
#One #One #One
</div>

<div id="two">
#Two #Two #Two
</div>

</div>

</body>

Synes godt om

roenving Novice

10. oktober 2005 - 18:15 #2

Hvis du vil have synkronisering på den måde er det nemmest at lave en tabel med to celler, for de kan automatisk hvad du ønsker !-)

-- og floats er notorisk positionerede elementer, så det er faktisk ikke underligt, at Geckoerne behandler dem på samme måde som absolut positionerede, så den eneste løsning med diver er at have faste højder på, eller lade sit layout være afhængig af en røvfuld javascript !o]

PS. Jeg er javascript-nørd, men det forhindrer altså ikke, at jeg synes, det er verdens dårligste løsning at basere layout på javascript ...

Synes godt om

snuf Nybegynder

10. oktober 2005 - 18:23 #3

Jeg vil helst undgå tables hvis det er muligt. Derfor forsøger jeg én gang for alle at finde en løsning.

JavaScript ungår jeg også helst ;o)

Synes godt om

roenving Novice

10. oktober 2005 - 18:29 #4

Hvorfor vil du dog undgå tables, når det nu er det eneste html-element, som på fornuftig vis kan løse dit problem ?-)

-- og hvis du vil undgå tables og javascript, så er dine sider bare forskellige i forskellige browsere, der findes ingen andre løsninger end de tre, jeg skitserede !-)

Synes godt om

snuf Nybegynder

10. oktober 2005 - 19:21 #5

Eneste årsag til at jeg (i dette tilfælde) vil undgå tabels, er egentligt bare fordi jeg er nysgerrig efter hvordan problemet løses. Jeg har stødt på problemet adskillige gange.

Jeg har intet imod tables, som sådan.

Synes godt om

roenving Novice

11. oktober 2005 - 00:09 #6

Hvis du vil bruge floats opfatter Gecko- (og andre renderings-) maskiner dem som udenfor det almindelige dokument-flows regler, og de har derfor ingen indflydelse på andre elementers størrelse ...

Synes godt om

notes2c Nybegynder

11. oktober 2005 - 12:08 #7

Det virker også i FF hvis du fortæller den hvornår din float stopper eller skal brydes. Har gjort det ved at indsætte en den div (<div style="clear: both;"></div>)

eks:
<div id="container">
<div id="one">#One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One #One</div>
<div id="two">#Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two #Two </div>
<div style="clear: both;"></div>
</div>

Synes godt om

snuf Nybegynder

11. oktober 2005 - 12:17 #8

Ja, det ligner en løsning. Var ikke bekendt med 'clear'..

Tak for hjælpen. Også til Roenving!

PS: Ved du om der er nogle ulemper ved denne løsning, eller noget andet jeg skal være opmærksom på?

(Har opdateret www.snuf.dk/eksperten med 'clear').

Synes godt om

notes2c Nybegynder

11. oktober 2005 - 12:21 #9

Nej, efter min mening er det den rigtige måde at gøre det på...

Synes godt om

snuf Nybegynder

11. oktober 2005 - 12:22 #10

Ok. Tak for det.

Synes godt om

roenving Novice

11. oktober 2005 - 14:56 #11

Nu hører jeg ofte den lidt søgte begrundelse for, at man skal benytte sig af divs og css fremfor tabeller, at man så kan redesigne hele sin side ved alene at rette i sit stylesheet, men den falder jo så bort, hvis man gør det på denne måde, da man så også skal rette i sin html-kode, med ovenstående element-konfiguration ...

-- og så vil jeg klart foretrække at bruge det element, som virker under alle omstændigheder, tabellen !-)

-- jeg har så inderligt meget imod at gå over åen, ringe efter en taxi, køre ind til byen og købe en flaske vand og derefter tage bussen tilbage, hvis jeg kan nøjes med at bukke mig ned og plaske lidt vand i hovedet !o]

Synes godt om

notes2c Nybegynder

11. oktober 2005 - 17:09 #12

Det at bruge tabeller (som design container) eller ej i ens design, er for min del op til den enkelte... Det diskuteres jo så rigligt i dette forum... Og tror ikke vi kommer det meget nærmere, for det afgørende er vel hvad det skal bruges til... Der er for og imod for begge løsninger... I sidste ende tror jeg at den som ender med at være bruger af sitet er ligeglad, bare det virker... Jeg synes heller man skulle bruge sit krudt på at tilsikre at det virker med de browsere som findes... Eksempelvis ved at følge standarderne, så er man da et langt stykke af vejen...

Og udgangpunktet er vel spørgsmålet. Kan det løses eller ej, eller er man nødt til at se sig om efter en anden løsning...

roenving >> Klart, brug for pokker det som virker, ingen tvivl om det og kan sagtens følge dig, men det var bare ikke det som var spørgsmålet.

Synes godt om

olebole Juniormester

11. oktober 2005 - 19:28 #13

<ole>

- svaret på et spørgsmål kan sagtens være, at den anvendte metode er dårligere end andre ... selvom opgaven kan løses på den pågældende måde.
Et godt svar behøver absolut ikke at være en direkte besvarelse af spørgsmålet :)

/mvh
</bole>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS