PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Frage zu Floats und dem Internet-Explorer

dav133
2008-01-22, 20:26:25
ntag,

man betrachte folgenden Code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<style type="text/css">

#bossbox
{
width:800px;
background-color:blue;
height:200px;
}

#box_links
{
float:left;
width:400px;
background-color:red;
height:200px;
}



#box_rechts
{
float:left;
width:400px;
background-color:yellow;
height:200px;
}


</style>
</head>

<body>

<div id="bossbox">


<div id="box_links">
links<br>langertextdernichtumgebrochenistundimmerweitergehtundimmerweitergehtundimmerweit ergeht
</div>


<div id="box_rechts">
rechts
</div>


</div>

</body>
</html>





Ergebnis Firefox/IE7/Opera/Safari: http://screencast.com/t/VvQiNpWXMK

Ergebnis IE6: http://screencast.com/t/rLZ3R1tZ5y

Erklärung:

Ich habe eine Box im Hintergrund (hier "Bossbox" genannt). In dieser Bossbox sind zwei weitere Boxen, "box_links" und "box_rechts". Wenn ich nun jedoch im IE6 (und nur in diesem) einen zu langen Text eintippe, wird das andere Float verrückt, wohingegen im FF und allen anderen browsern alles wie erwartet läuft. Was könnte man dagegen tun?


lg
Blade II
2008-01-22, 20:54:00
"overflow" könnte helfen: http://www.css4you.de/overflow.html
dav133
2008-01-22, 21:03:23
Ha! Super, danke. Man füge "overflow:hidden;" in die links Box ein, und die Darstellung ist auch im IE6 entsprechend.

Danke.

lg
dav133
2008-01-25, 20:26:29
Habe doch noch ein Problem (http://www.d-mueller.de/problem.htm) :(.

lg
darph
2008-01-25, 20:30:56
Habe doch noch ein Problem (http://www.d-mueller.de/problem.htm) :(.

lg
Forums-suche nach faux columns. ;(
Sephiroth
2008-01-25, 20:32:00
Habe doch noch ein Problem (http://www.d-mueller.de/problem.htm) :(.

lg
Wurde schön des öfteren gefragt und rein mit CSS ist es nicht möglich.
Mit min-height könntest du wenigstens eine Minimalhöhe angeben, falls du die nie unterschreitest. Tja, sonst bleibt nur JavaScript.
clerfayt
2008-01-25, 23:54:06
Forums-suche nach faux columns. ;(

Darauf hätte ich jetzt auch verwiesen. Es gibt aber noch eine Möglichkeit, für den speziellen Fall, dass es von vornherein klar ist, welche Spalte/ Box länger sein wird (in diesem Fall wäre es die linke):



#box_links
{
width:400px;
background-color:red;
height:100%;
border-width: 0 400px 0 0;
border-color: yellow;
border-style: solid;
}

#box_rechts
{
margin-left: -400px;
width:400px;
background-color: none;
height:100%;
}

Habs jetzt aber nicht groß getestet, es muss sicher noch angepasst werden.
darph
2008-01-26, 11:17:49
Aber eine interessante Idee. :)
darph
2008-01-26, 11:19:52
Aber eine interessante Idee. :)