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 22:30 Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
I går 15:56 Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I går 14:10 Outlook henter ikke mails Af TTA i Office & Kontorpakker
I går 13:58 vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I går 13:35 Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling
White papers
Flere white papers »


Premium
Teaser billede
Vil købe tele-løsninger til det offentlige for 370 millioner kroner
Læs mere »
Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"
Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen
Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet
Se alle »
Computerworld
Teaser billede
Microsofts nye pc er ekstrem billig – men kan blive ekstrem sikker og fleksibel
Læs mere »
Test: Prøv kun disse B&O-hovedtelefoner, hvis du har råd
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Telegigant klar med AI-baseret mormor: Holder telefon-svindlere fast i røret med sniksnak og dumme spørgsmål
Se alle »
CIO
Teaser billede
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Microsofts store årlige event: De tre vigtigste nøglebudskaber fra Satya Nadella om Microsofts fremtid
Tre vigtige erkendelser, som Computerworld tog med hjem fra Gartners store topmøde i Barcelona
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Topchef Sara Green mener, at der er brug for et radikalt nyt syn på it-ledelse - særligt én ny trend hader hun som pesten
Se alle »
White paper
Teaser billede
Sikkerhed uden grænser: Cisco Hypershield
Læs mere »
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
Styrk compliance, sikkerhed og overblik med ét hug
Se alle »

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