M
✔ 3 Kasten nebeneinander floaten
- Themenstarter son gohan
- Beginndatum
- Status
M
Maik
Hier mein alternativer Lösungsvorschlag, in dem die Quersumme aller drei DIV-Weiten 100% ergibt:
[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]
greez, maik.l
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
<!--
#box1
{
float:left; width:67%; height:100px; background-color:#00BF00;
}
#box2
{
float:left; width:13%; height:100px; background-color:#FF0000;
}
#box3
{
float:right; width:20%; height:100px; background-color:#00A0FF;
}
-->
</style>
</head>
<body>
<div id="box1">Links</div>
<div id="box2">Mitte</div>
<div id="box3">Rechts</div>
</body>
</html>greez, maik.l
Zuletzt bearbeitet von einem Moderator:
son gohan
Erfahrenes Mitglied
Hallo maik,
dein Beispiel sieht so aus wie mein erster Versuch. Da habe ich nämlich auch alles nebeneinander gefloatet, aber hier tritt das Problem auf, dass beim vergrößern der Fenster das letze Kästchen rechts wieder runter fällt. Man denk sich zwar das es kaum auffällt, aber ich habe es schon bemerkt das sich das ganze Abspielt direkt nachdem man die Seite lädt.
Deshalb will ich das nicht nehmen, ich denke das es viele LEute gibt die bei solchen Seiten wieder weckklicken.
Und was auf der Website Peruns Blog erklärt wird hat mir auch nicht geholfen, aber trotzdem vielen Dank für deine Bemühungen.
gruß
feh
dein Beispiel sieht so aus wie mein erster Versuch. Da habe ich nämlich auch alles nebeneinander gefloatet, aber hier tritt das Problem auf, dass beim vergrößern der Fenster das letze Kästchen rechts wieder runter fällt. Man denk sich zwar das es kaum auffällt, aber ich habe es schon bemerkt das sich das ganze Abspielt direkt nachdem man die Seite lädt.
Deshalb will ich das nicht nehmen, ich denke das es viele LEute gibt die bei solchen Seiten wieder weckklicken.
Und was auf der Website Peruns Blog erklärt wird hat mir auch nicht geholfen, aber trotzdem vielen Dank für deine Bemühungen.
gruß
feh
M
Maik
Okay, hier die CSS-Lösung für den IE-Bug: Conditional Comments ;-]
Mehr Details zu dieser Technik findest du unter CSS4You.de - Browserweiche für IE
greez, maik.l
Code:
<style type="text/css">
<!--
#box1
{
float:left; width:67%; height:100px; background-color:#00BF00;
}
#box2
{
float: left; width:13%; height:100px; background-color:#FF0000;
}
#box3
{
float:right; width:20%; height:100px; background-color:#00A0FF;
}
-->
</style>
<!--[if gte IE 5]>
<style type="text/css">
#box3 { clear: left; }
</style>
<![endif]-->greez, maik.l
- Status
