|
|||
Problem mit float und margin
Hallo zusammen!
Ich habe ein Problem mit folgendem Layout (nochmals als txt dem Anhang beigefügt): Ich habe drei div-boxen mit einer Breite von jwl. 603px. Diese drei Boxen sollen untereinander dargestellt werden und jeweils einen vertikalen Abstand von 3px aufweisen. Die mittlere Box enthält zudem drei weitere div-boxen, die links floaten sollen und ebenfalls einen 3px-Abstand zueinander (diesmal horiz.) haben sollen. Hier der Code: Das CSS: HTML-Code:
#box1 { width:603px; height:308px; background-color:red; margin-bottom:3px; } div#box2 { width:603px; padding:0px; display:block; margin-bottom:3px; background-color:blue; } #box2 div { width:199px; height:257px; background-color:pink; float:left; } #box2 div.spacer { width:3px; background-color:blue;} #box3 { width:603px; height:152px; clear:both; background-color:green; } HTML-Code:
<div id="box1"></div> <div id="box2"> <div></div> <div class="spacer"></div> <div></div> <div class="spacer"></div> <div></div> </div> <div id="box3"></div> Nach der zweiten Box, welche die drei floatenden div-container beinhaltet, wird zwar die danach folgende, dritte Box korrekt dargestellt - jedoch ohne den definierten 3px-margin zur zweiten Box. Dies jedoch nur im Firefox. Im Internet Explorer wird es, wie gewünscht, dargestellt. Hoffe, ihr könnt mein Problem einigermaßen nachvollziehen und noch viel mehr, dass mir jemand den Hintergrund für das Auftreten und eine Lösung für dieses Problem aufzeigen kann. Vielen Dank schonmal im Vorraus! Gruß raz |
Sponsored Links |
Sponsored Links |
|
|||
Hi DNA!
Ich danke dir für deine Mühe! Allerdings konnte ich damit das Problem noch nicht lösen. Zunächst eine Verständnisfrage: Du sagst, ich solle nach den drei floatenden Elementen ein clearendes Element hinzufügen. Das tut doch aber schon #box3? Wenn ich dieser im css kein 'clear:both' mitgeben würde, würde diese hinter #box2 verschwinden. Oder meintest du, ich soll eine clearendes Element INNERHALB von #box2, nach den drei floatenden divs einfügen? Das habe ich probiert. Habe unter die drei float-divs ein p-tag mit margin u. padding jwl. 0 und 'clear:both' gesetzt. Hat das Problem aber leider nicht beseitigt. Der Abstand ist leider immer noch non-existent. :/ EDIT: Hat doch geholfen! Tausend Dank! Hatte dem clearenden <p>-Tag ausversehen einen display:inline mitgegeben und dabei vergessen, dass inline-elemente keine floats clearen. Gruß raz Geändert von raz (11.12.2008 um 15:52 Uhr) |
|
||||
So:
HTML-Code:
<div id="box1"></div> <div id="box2"> <div></div> <div class="spacer"></div> <div></div> <div class="spacer"></div> <div></div> <p style="clear: left; margin:0; padding:0;"></p> </div> <div id="box3"></div> |
|
|||
Ja genau! So habe ich es auch probiert. Nur hab ich dem <p>-Tag eben, wie oben im edit bereits erwähnt, ein display:inline mitgegeben und dabei vergessen dass inline-elemente keine divs floaten.
Also nochmals vielen Dank für deine Hilfe! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bildbeschreibung rechts, und am unteren Bildrand ausrichten | jcl | CSS | 17 | 21.04.2010 12:32 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
Problem mit CSS Style | flo007 | CSS | 3 | 25.01.2009 18:08 |
Spaltenlayout | Bilbo | CSS | 40 | 14.04.2008 16:45 |
IE zeigt gewisse Texte nicht an | zitronenbaum | CSS | 2 | 16.01.2008 16:25 |