8 svar · 235 visningar · startad av maqe
Varför fungerar inte följande i FF http://member.webforum.nu/6596/float.htm
första divven har float:left, andra divven har float:left och clear:left, tredje divven har float:left då borde den hamna i höjd med första divven som den gör i IE? Nån som har ett förslag på hur jag kan göra detta?
Förenklat kan man säga att clear gör så att ett element hamnar nedanför alla flytande element.
Float gör så att ett element hamnar mot botten av föregående element (blockelement).
Clear gör att #tva hamnar nedanför #ett.
Eftersom du floatar #tva och #tre hamnar de sida vid sida.
FF gör rätt och IE fel.
Hm låter konstigt. Någon som har en lösning på detta eminenta problem?
Du får väl lägga in en exra div t.ex:
<html>
<head><title></title>
<style>
#left {float:left;}
#ett
{
height:100px;
width:100px;
background-color:pink;
}
#tva
{
height:100px;
width:100px;
background-color:blue;
}
#tre
{
height:300px;
width:100px;
background-color:purple;
float:left;
}
</style>
</head>
<body>
<div id="left">
<div id="ett">
Logga
</div>
<div id="tva">
Meny
</div>
</div>
<div id="tre">
Content
</div>
</body>
</html>
Enda jag kan komma på efter för många timmars vakenhet är att du gör en wrapper div runt #logga och #meny. Men det borde du kommit på själv så jag antar att du inte vill ha den lösningen?
Jag har varit inne på den banan men ville försöka hålla ned divvandet :) ... lutar dock emot att det blir en sådan lösning
Annars får du nog fula till det med position: absolute, och då kan jag tänka mig att du hellre kör med en extra div :)
Såhär kan du göra utan en extra div:
<html>
<head><title></title>
<style>
#ett
{
height:200px;
width:100px;
background-color:blue;
float:left
}
#tva
{
height:100px;
width:100px;
background-color:pink;
}
#tre
{
height:300px;
width:100px;
background-color:purple;
float:left;
}
</style>
</head>
<body>
<div id="ett">
<div id="tva">
Logga
</div>
Meny
</div>
<div id="tre">
Content
</div>
</body>
</html>
Insider skrev:
Såhär kan du göra utan en extra div:
<html> <head><title></title> <style> #ett { height:200px; width:100px; background-color:blue; float:left } #tva { height:100px; width:100px; background-color:pink; } #tre { height:300px; width:100px; background-color:purple; float:left; } </style> </head> <body> <div id="ett"> <div id="tva"> Logga </div> Meny </div> <div id="tre"> Content </div> </body> </html>
Detta fungerar inte i min lösning tyvärr