zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit float und margin

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.12.2008, 15:21
raz raz ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2008
Beiträge: 3
raz befindet sich auf einem aufstrebenden Ast
Standard 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;
}
und das HTML:
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>
Jetzt tritt folgendes Problem auf:

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
Angehängte Dateien
Dateityp: txt test.txt (934 Bytes, 0x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.12.2008, 15:35
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Der Fehler liegt nicht im FF sondern im IE.

Leg mal einen Border um alle divs, dann siehst du wo das Problem ist.
Dein 2. Div nimmt automatisch die höhe seines Inhaltes an, allerdings werden gefloatete Elemente aus dem normalen Textfluss raus genommen und über die anderen Elemente glegt. D.h. dein 2.Div denk, er ist leer und wächst demenstprechend nicht mit den 3 inneren, gefloateten divs mit.

Lösung: nach den gefloateten divs muss ein clearendes Elemen hin, dann wächst dein 2.Div mit und der Abstand passt auch wieder.

Nachzulesen auch in den FAQ, Punkt 2

Geändert von David (11.12.2008 um 15:37 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.12.2008, 15:45
raz raz ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2008
Beiträge: 3
raz befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 11.12.2008, 15:50
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

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>
Funktioniet es bei mir, wie es soll.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.12.2008, 15:58
raz raz ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.12.2008
Beiträge: 3
raz befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:42 Uhr.