|
|||
Grunsätzliches Verständnis von Floating
Ich habe eine Frage zum Thema Floating.
Überlichweise baue ich alle Websites wie in der angefügten Grafik 1 dargestellt. Dabei werden Header, Subnavigation, Content, Sidebar und Footer mit float:left und einer width:XXpx formatiert. Grafik 1 Damit jetzt im Content-Bereich die Elemente automatisch die Maximalbreite haben, floate ich kein Element. Ausnahme: In einem P der Klasse "image-left" ist ein Bild, das float:left gefloatet wird. Jetzt kommen wir zur Frage. Braucht man danach immer ein Element zum clearen mit clear:both oder clear:left ? Gibt es da andere Möglichkeiten? Siehe Grafik 2. Aktuell mache ich das immer mit einem DIV class="clearer". Grafik 2 Ich bin Dankbar für Ideen und Erklärungen! |
Sponsored Links |
|
|||
Musst nicht.
ich cleare eigentlich nie. Besser ist es aber. Jenachdem was du machen willst. div`s und p`s haben bei mir immer eine min-height und feste Breite. Von daher brauche ich das clear nicht. |
Sponsored Links |
|
|||
Mein Problem ist aber, wenn der Contentbereich verschiedene Breiten haben könne muss. Aktuell würde ich das so lösen, dass der Body eine id bekommt.
HTML-Code:
<body id="index">
Im CSS steht dann beispielhaft folgendes HTML-Code:
body#index #content p, body#index #content ul, body#index #content h1, body#index #content h2{ width:500px; } Meine Frage war ja, ob mein Ansatz falsch ist, ein gefloatetes Element im Contentbereich wieder zu clearen. Und vor allem ob es etwas eleganters gibt als imm DIVs hinter das gefloatete Element zu schreiben. |
|
||||
Du brauchst weder width, noch min-height, noch leere Elemente. Statt des leeren grünen divs kann auch das folgende rote (mit Inhalten) clearen. Oder Du sorgst dafür, dass das orange, das den Float enthält, diesen vor vorneherein einschließt, z.B. indem es selber floatet (dann braucht es eine Breite), oder per Clearfix (siehe FAQ 2).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Du musst allen einen feste breite geben !
Sonst bekommst du erhebliche schwierigkeiten in anderen Browsern. ich würde es so machen: <style type="text/css"> #content {float:left: width:520px; min-height:650px;} #div1 {float:left; width:500px; min-height:150px; margin:20px 0 0 0;} // alles nur grobe Richtwerte usw. <div id="content"> <div class="div1"></div> <div class="div1"></div> <div class="div1"></div> <divclass="div1"></div> </div> in diesen div`s kannst du dann deine Inhalte einfügen. Die du auch floaten musst. die hauptdivs (subnavigation, cont., sidebar) müsstest du ebenfalls floaten. um alle 3 großen divs solltest du ein div setzen was du ebenfalls floaten müsstest sowie ihm eine min-height verpassen. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wiedermal floating | mcdaniels | CSS | 7 | 16.05.2011 21:08 |
IE7 Floating DIV und Background des Containers | SXP | CSS | 3 | 04.03.2010 14:45 |
Probleme im IE6 und IE7 (wahrscheinlich floating) | Guitarrero | CSS | 16 | 19.10.2009 12:53 |
floating überlappt sich | Luke_Skyscraper | CSS | 7 | 14.09.2006 08:05 |
floating Problematik bei verschachtelten div's | bensen | CSS | 2 | 29.05.2005 17:36 |