CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede 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.
Avatar billede 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>
Avatar billede 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 ...
Avatar billede 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)
Avatar billede 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 !-)
Avatar billede 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.
Avatar billede 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 ...
Avatar billede 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>
Avatar billede 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').
Avatar billede notes2c Nybegynder
11. oktober 2005 - 12:21 #9
Nej, efter min mening er det den rigtige måde at gøre det på...
Avatar billede snuf Nybegynder
11. oktober 2005 - 12:22 #10
Ok. Tak for det.
Avatar billede 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]
Avatar billede 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.
Avatar billede 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>
Avatar billede 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.

Loading billede Opret Preview
Kategori
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
Variabler som ikke virker Af Frits Jensen i HTML 2 30/10/202409:37 30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML 2 29/09/202410:58 30/09/202412:04
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 19:53 CD Burner XP (Sætte den til at optage nogle numre fra en CD - Men ikke alle ? Af Ikke-ekspert i Musik & videoafspillere
I går 17:42 Katastrofe med Pc Af LilBe i PC
I går 09:44 Mine emails kan pluselig ikke læses af modtagerne, kun uforståelige tal og bogstaver Af gunnarb i E-mail programmer
24/1216:03 Fjern "Seneste" - "Hurtig adgang" Fra Windows 11 - Hvordan ? Af Ikke-ekspert i Windows
23/1214:43 html <Input.. Danske bogstaver Af pjotre i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Historisk million-bøde får Region Syddanmarks it-direktør til at efterlyse nye GDPR-retningslinjer
Læs mere »
Ser med 'stor alvor' på problemer med vand, varme og manglende kontrol i politiets datacenter
Brugere rammes af Microsoft-fejl: M365-produkter er på mystisk vis blevet deaktiveret
Overblik: Danske it-selskaber strømmer ind mod den centrale storby - og det handler ikke om penge
Se alle »
Computerworld
Teaser billede
Netværkstest: Første mesh-sæt med komplette WiFi 7-features sætter nye rekorder for dækning og hastighed
Læs mere »
Til næste år kommer iPhone 17 – og ifølge rygtestrømmene vil den byde på tre nyheder
Her er dommen: Region Syddanmark skal betale historisk stor bøde for grove overtrædelser af GDPR
Nørgaard: Copilot scorer pænt højt i min kendte 3D-test (Dyrt, Dumt, Dårligt)
Se alle »
CIO
Teaser billede
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Læs mere »
En af verdens største it-distributører dropper samarbejdet med Broadcom: Kunne ikke nå til enighed
AI er et falmende buzzword: Lad mig fluks dele en god og en dårlig nyhed
TV 2 indsætter tidligere specialist i Forsvarets Efterretningstjeneste og hos KMD som ny CISO
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Merete Søby klar med nyt top-job efter pludselig exit fra Schultz: Her er hendes nye job
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Dansk headhunter: Dette spørgsmål bliver jeg næsten altid stillet, når jeg forsøger at rekruttere it-folk
Se alle »
White paper
Teaser billede
Sådan gør du: Elektronisk dokumentudveksling i praksis
Læs mere »
Beskyt virksomheden mod trusler – og hold ressourceforbruget nede
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering
Cyberangreb bliver mere kostbare: Er du forberedt?
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »