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

andy Nybegynder

07. juni 2006 - 10:30 Der er 7 kommentarer og
2 løsninger

2 floated divs giver problem for tredje floated div

Hej,

Undskyld den dårlig titel. Kunne ikke lige finde på noget mere beskrivende.

Jeg har lavet to eksempeler. Det første virker efter hensigten i både IE og FF, nemlig at floaten i #container forbliver i denne. Men når jeg tilføjer endnu en float uden for #container som i eksempel 2, hopper floaten i #container uden for denne div - vel og mærke kun i FF.

Eksempel 1: http://www.agehrke.com/exp/float-test1.html
Eksempel 2: http://www.agehrke.com/exp/float-test2.html

Hvad gør jeg galt? Kan jeg "hacke" mig ud af det? Sætter stor pris på enhver kommentar eller svar.

/Andreas

Synes godt om

mm12010 Nybegynder

07. juni 2006 - 10:58 #1

den letteste løsning vil være at smide dine menu-div's ind i en div:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<div class="menu"><div>
<p>Content for id "menu" Goes Here</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div>
<p>Content for id "menu" Goes Here</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="container">
<div id="float">Content for id float Goes Here</div>
<p>Content for id container Goes Here</p>
<p>sdf sdf sdfsfdsfds ds hf dfkjs hdfkjsdf s</p>
<p>dfs dfkjsdhf ksdh fkjhsdkfhsdkh fksdf s</p>
<p>f sd fsd kfjhsdjhfksh dkjsdh jsdf ksdh kshd shjf sdjh fksf sf hskjf </p>
<p>  </p>
</div>
</body>
</html>

Synes godt om

andy Nybegynder

07. juni 2006 - 11:12 #2

Ja, det er selvfølgelig en mulighed. Men jeg skal bruge fleksibiliteten i at de netop ikke er samlet i én div :-)

Synes godt om

notes2c Nybegynder

07. juni 2006 - 12:20 #3

som jeg ser det er du nødt til at følge (mm12010 07/06-2006 10:58:40) fordi du floater og clear'er i samme div. Det betyder at din float inde i container vil relatere sig til den anden clear som du har i div menu. Og derfor springer den ud af boksen. Hvilket også betyder at FF gør det rigtige efter min mening...

Synes godt om

mm12010 Nybegynder

07. juni 2006 - 12:30 #4

ganske enig - du kommer ikke uden om et extra container element...

Synes godt om

andy Nybegynder

08. juni 2006 - 18:04 #5

Okay, tak for kommentarene. Smider I begge et svar?

Synes godt om

mm12010 Nybegynder

08. juni 2006 - 20:35 #6

selv tak :-)

Synes godt om

notes2c Nybegynder

08. juni 2006 - 20:38 #7

Det er fint :-)

Synes godt om

notes2c Nybegynder

08. juni 2006 - 20:39 #8

Også svaret

Synes godt om

andy Nybegynder

08. juni 2006 - 22:39 #9

Fino. Værsgo.

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
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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS