nicht angemeldet
float-Problem: clear
Hallo,
wie der Titel schon sagt, habe ich ein Problem mit Float:
Ich erstelle eine links-floatende Navigationsleiste, mein Content-Bereich soll neben dran sein und den Rest der Breite benutzen...
Jetzt kann es aber auch mal sein, dass in dem Content-Bereich auch nochmal was floaten soll.. Funktioniert auch Problemlos, wenn aber mal ein Text unter der zu floatenden Sache steht (z.B. Image), dann gibt es ein Problem, und zwar nicht nur im IE, sondern auch mal im FF..
seht es euch einfach mal mit diesem Beispiel an, damit erklärt es sich am besten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="float: left; background: #f00; width: 210px;">
<div style="margin-bottom: 1000px">
Ein div in der Navigation, will einen großen Abstand nach unten
</div>
<div>
noch ein div, ganz weit unten
</div>
</div>
<div style="margin-left: 211px; background-color: #0f0">
<img src="img/sn_level2.png" style="float: left">
Hey, hier will ein Image floaten!
<br style="clear: both">
Das hier soll wieder unter das image...
...aber doch nicht unter die Navigation! =(
</div>
</body>
</html>
Danke schonmal,
botl1k3
-
Hi,
Ich erstelle eine links-floatende Navigationsleiste, mein Content-Bereich soll neben dran sein und den Rest der Breite benutzen...
Jetzt kann es aber auch mal sein, dass in dem Content-Bereich auch nochmal was floaten soll.. Funktioniert auch Problemlos, wenn aber mal ein Text unter der zu floatenden Sache steht (z.B. Image), dann gibt es ein Problem, und zwar nicht nur im IE, sondern auch mal im FF..Informiere dich, was ein block formating context ist.
Arbeite den SELFHTML aktuell Weblog-Artikel Grundlagen für Spaltenlayout mit CSS durch.
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."-
Hi,
Informiere dich, was ein block formating context ist.
Ich habe davon eben grade gelesen, bevor ich deine Antwort hier gelesen habe, hatte es dann doch erstmal so gemacht, dass ich beide Spalten floaten gelassen habe, aber hab mir nochmal den Link von dir angesehen, habs jetzt umgeschrieben auf overflow: hidden, macht die ganze Sache einfacher für spätere Änderungen,
Danke!
-
Jetzt hab ich doch noch ein Problem mit dem overflow bekommen:
Der IE7 nimmt margin vom äußerem Rand, FF den Rand des floatenden divs...-
Hi,
Jetzt hab ich doch noch ein Problem mit dem overflow bekommen:
Der IE7 nimmt margin vom äußerem Rand, FF den Rand des floatenden divs...Welcher Zusammenhang zum overflow soll da bestehen, und was meinst du mit "nimmt von ..."?
HTML und CSS validiert?
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."-
Hi,
Welcher Zusammenhang zum overflow soll da bestehen, und was meinst du mit "nimmt von ..."?
also ich habe ja die zwei Spalten die ich ja oben als Beispielcode gepostet habe.. die rechte soll ja jetzt ein
overflow: hiddenbekommen, damit ich mit einemclear: bothz.B. nur die floats innerhalb der rechten Spalte beeinflusse..
Wenn ich der rechten Spalte jetzt einmargin-left: 151pxgebe, dann hat die Spalte einen Pixel abstand zur linken (da 150px Breit), im IE7 sind es dann leider 151px...HTML und CSS validiert?
Jop, ist ja der selbe Code wie oben
Gruß
-
Sorry, das Verhalten ist genau verkehr herum, also der FF hat zu viel Abstand, und die Breite der linken Spalte ist natürlich im Beispiel nicht 150px sondern 210px..
Ist ja auch schon spät ;)
-
-
-
-
-