Avatar billede 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
Avatar billede 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">
<!--
div.menu {
    float:left;
    width: 250px;
}
div.menu div {
    border: 1px solid #FF0000;
}
#container {
    margin-left: 260px;
    border: 1px solid #00FF00;
}
#float {
    float:left;
    width: 100px;
    border: 1px solid #0000FF;
}
-->
</style>
</head>
<body>
<div class="menu"><div>
  <p>Content for  id "menu" Goes Here</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div>
  <p>Content for  id "menu" Goes Here</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</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>&nbsp; </p>
</div>
</body>
</html>
Avatar billede 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 :-)
Avatar billede 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...
Avatar billede mm12010 Nybegynder
07. juni 2006 - 12:30 #4
ganske enig - du kommer ikke uden om et extra container element...
Avatar billede andy Nybegynder
08. juni 2006 - 18:04 #5
Okay, tak for kommentarene. Smider I begge et svar?
Avatar billede mm12010 Nybegynder
08. juni 2006 - 20:35 #6
selv tak :-)
Avatar billede notes2c Nybegynder
08. juni 2006 - 20:38 #7
Det er fint :-)
Avatar billede notes2c Nybegynder
08. juni 2006 - 20:39 #8
Også svaret
Avatar billede andy Nybegynder
08. juni 2006 - 22:39 #9
Fino. Værsgo.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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