nicht angemeldet
Float aufheben in bestimmten Container
Hallo zusammen,
ich habe ein Problem mit CSS und Float, bzw. Clear.
Ich habe ein zweispaltiges Layout. Linke Spalte Navigation, rechte Spalte Inhaltscontainer.
Der Inhaltscontainer ist mit "float:left;" an die rechte Seite der Navigation geheftet.
Alles wunderbar bis jetzt. Ich möchte nun innerhalb des Inhaltscontainer ebenfalls etwas mit "float:left;" layouten. Das funktioniert soweit auch bis ich nach dem gefloateten Bereich "clear:left;" aufrufen muss. Dieses "clear:left;" unterbricht nicht nur den gefloateten Bereich im Inhaltscontainer, sondern auch den float der Navigation, d.h. mein Inhaltsbereich rutscht unter die Navigation Links.
Wie kann ich "clear:left;" in einem DIV-Kontext aufrufen und nicht im globalen Float-Kontext?
mfg Maik
Beispiel:
<div style="float:left;">
NAVIGATION
</div>
<div>
INHALTSBEREICH
<h1>Ü1</h1>
<img src="..." style="float:left;">
<p>BLABLA</p>
<h1 style="clear:left;">Ü1</h1>
<img src="..." style="float:left;">
<p>BLABLA</p>
</div>
-
Hi,
Wie kann ich "clear:left;" in einem DIV-Kontext aufrufen und nicht im globalen Float-Kontext?
indem Du dem Div ein overflow:hidden im css gibst, oder es ebenfalls floatest (Bislang ist ja nur die navi gefloatet).
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo Joachim,
vielen Dank für den Hinweis.
Im Firefox2 ist das mit overflow:hidden ein super Tip, funktioniert hervorragend. IE6/7 spielen da leider nicht mit und setzen den Inhaltsbereich komplett unter die Navi, da ja der float:left der Navi aufgehoben wird im Inhaltsbereich.
Der zweite Vorschlag ist von der Logik her besser nachvollziehbar, aber das clear:left beendet leider alle float:left´s, die im Vorfeld deklariert wurden, also funktioniert auch nicht.
Habe ich noch ein Denkfehler, oder mache ich noch etwas falsch?
mfg Maik
Hi,
Wie kann ich "clear:left;" in einem DIV-Kontext aufrufen und nicht im globalen Float-Kontext?
indem Du dem Div ein overflow:hidden im css gibst, oder es ebenfalls floatest (Bislang ist ja nur die navi gefloatet).Gruesse, Joachim
-
Hier nochmals ein vereinfachtes Beispiel, einfach mit C&P rausnehmen und mit Browser öffnen:
Wenn ich dem DIV mit der ID "content" den Style overflow:hidden gebe, dann geht es wie geschrieben im FF nur nicht in den IE´s.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<html>
<body><div id="navi" style="float:left;">
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
Navigation<br>
</div><div id="content" style="padding-left: 10em;">
<h1>Ueberschrift 1</h1>
<p>Bla bla</p>
<h1 style="float: left;">Ueberschrift1</h1>
<p style="clear: left;">Bla bla</p>
</div>
</body></html>
-
Yerf!
Wenn ich dem DIV mit der ID "content" den Style overflow:hidden gebe, dann geht es wie geschrieben im FF nur nicht in den IE´s.
Bei IE kann man das "geliebte" hasLayout dafür hernehmen: gib dem DIV z.B. height:1% (nur für den IE)
Mehr dazu gibts hier.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi Harlequin,
vielen Dank für den Hinweis und den überaus informativen Link. Mit Conditional Comments habe ich die height: 1% eingefügt und es funktioniert tadellos.
Vielen Dank an die Antworten und Problem gelöst :).
mfg Maik
Yerf!
Wenn ich dem DIV mit der ID "content" den Style overflow:hidden gebe, dann geht es wie geschrieben im FF nur nicht in den IE´s.
Bei IE kann man das "geliebte" hasLayout dafür hernehmen: gib dem DIV z.B. height:1% (nur für den IE)
Mehr dazu gibts hier.
Gruß,
Harlequin
-
-
-
-