Problem beim Umbruch von Float-DIVs

Beitrag von **ole1210** » 24.09.2006, 18:00

Moin moin,

Habe mir einen DIV-Container angelegt, und da 15 weitere DIVs reingelegt.
Die 15 DIVs haben ein float: left bekommen. Der Äussere DIV hat 90% Fensterbreite, je nach Fenstergrösse brechen nun die 15 DIVs um (wie sie auch sollen) und ich haben 3, 4 oder mehr in einer Reihe.

Soweit so gut.

Im FF erfolgt der Umbruch sobald das innere DIV ans äussere "anstösst".
Innere DIVs sind 200px breit, bei ner Fenstergröße von 600px werden 3 in einer Reihe angezeigt, bei 599px nur noch 2. Genau so soll es sein.

Im IE haben ich bei einer Fenstergröße von 600px ebenfalls 3 DIVs nebeneinander. Hier erfolgt der Umbruch aber nicht schon bei 599px sondern knapp über 400px.

Wie kann ich das beheben?

Der CSS-Code:

Code: Alles auswählen

#divaussen &#123;
width&#58; auto;
margin&#58; 10px 130px;
&#125;

#divinnen &#123;
padding&#58; 2px;
margin&#58; 5px;  
border&#58;1px solid #ff9900; 
float&#58; left; 
background&#58; #ffcc33; 
width&#58; 200px;

von **Anzeige von ABAKUS** »

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Beitrag von **babasave** » 24.09.2006, 18:56

https://www.abakus-internet-marketing.d ... highlight=

~baba

Beitrag von **ole1210** » 24.09.2006, 19:19

Das hilft mir leider nicht weiter. Die breite der inneren DIVs MUSS absolut sein. Alles andere geht leider nicht.

Es muss doch nen Hack oder sowas geben, oder?

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **derwebling** » 24.09.2006, 21:57

Also das was du beschrieben hast passt nicht ganz mit deinem CSS-Code zusammen. Vielleicht hilft dir diese Lösung. Ich hab dir das ganze mal so nachgebaut wie es funktionieren könnte.

Ich hoffe das hilft dir weiter.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Divaussen - Divinnen</title>
<style>
#BoxAussen&#123;
	display&#58;table;
	position&#58;relative;
	background-color&#58;#00FF00;
	width&#58;90%;
&#125;
#BoxInnen&#123;
	display&#58;block;
	position&#58;relative;
	width&#58;200px;
	height&#58;20px;
	line-height&#58;20px;
	margin&#58;5px;
	float&#58;left;
	background-color&#58;#FF0000;
	
&#125;
</style>
</head>

<body>
<div id="BoxAussen">
	<div id="BoxInnen">1</div>
	<div id="BoxInnen">2</div>
	<div id="BoxInnen">3</div>
	<div id="BoxInnen">4</div>
	<div id="BoxInnen">5</div>
	<div id="BoxInnen">6</div>
	<div id="BoxInnen">7</div>
	<div id="BoxInnen">8</div>
	<div id="BoxInnen">9</div>
	<div id="BoxInnen">10</div>
	<div id="BoxInnen">11</div>
	<div id="BoxInnen">12</div>
	<div id="BoxInnen">13</div>
	<div id="BoxInnen">15</div>
	<div id="BoxInnen">15</div>
</div>
</body>
</html>

Beitrag von **ole1210** » 24.09.2006, 22:37

Wieso das? Mein CSS-Code passt genau zu meinem Problem und zu meiner Beschreibung.

Deine Idee mit display:table mag zwar funktionieren (habs nbicht getestet), allerdings wird das vonn sämtlichen IEs nicht unterstützt und ist somit vollkommen untauglich!

Beitrag von **derwebling** » 25.09.2006, 07:55

Du schreibst in deinem css width="auto" und sprichst in deiner Beschreibung von width="90%"???

Ist wahrscheinlich zu hoch für mich

P.S.: Im IE 5.5 & 6 funktioniert das einwandfrei!

Beitrag von **philophax** » 25.09.2006, 08:19

Könnte das ein Problem der Dokumenttyp-Deklaration sein?
https://de.selfhtml.org/css/formate/box_modell.htm
"Box-Modell-Fehler des Internet Explorers"

Beitrag von **ole1210** » 25.09.2006, 08:32

Du schreibst in deinem css width="auto" und sprichst in deiner Beschreibung von width="90%"???

Da hast du recht. Auf Grund der margin-werte ist das DIV etwas kleiner als der Monitor. Daher habe ich von 90% gesprochen. War unklar. Stimmt vollkommen.

Beitrag von **derwebling** » 25.09.2006, 09:05

Geht's jetzt wenigstens? Wenn nicht poste doch einfach mal den ganzen Code.

Beitrag von **ole1210** » 25.09.2006, 09:44

Wie solltes es jetzt gehen? Deine Antwort kann ich nicht nutzen, da in praktisch allen Quellen steht das display:table vom IE nicht korekt dargestellt wird.

Es gibt zwar praktisch nicht viel mehr code, aber dann hier mal alles:

CSS:

Code: Alles auswählen

#left, #right &#123;
width&#58; 120px;
line-height&#58; 18px;
&#125;
#left &#123;
position&#58; absolute;
left&#58; 10px;
margin&#58;10px 0px;
&#125;
#right &#123;
position&#58; absolute;
right&#58; 10px;
margin&#58;10px 0px;
&#125;

#divaussen &#123;
width&#58; auto;
margin&#58; 10px 130px;
&#125;

#divinnen &#123; 
padding&#58; 2px; 
margin&#58; 5px;  
border&#58;1px solid #ff9900; 
float&#58; left; 
background&#58; #ffcc33; 
width&#58; 200px; &#125;

HTML:

Code: Alles auswählen

<div id="left">
Blablubb
</div>

<div id="right">
Blablubb
</div>

<div id="divaussen">
15 x <div id="divinnen"></div>
<p style="clear&#58; left;"></p>
</div>

Beitrag von **Graccem** » 25.09.2006, 18:34

ole1210 hat geschrieben:
Im FF erfolgt der Umbruch sobald das innere DIV ans äussere "anstösst".
Innere DIVs sind 200px breit, bei ner Fenstergröße von 600px werden 3 in einer Reihe angezeigt, bei 599px nur noch 2. Genau so soll es sein.

Im IE haben ich bei einer Fenstergröße von 600px ebenfalls 3 DIVs nebeneinander. Hier erfolgt der Umbruch aber nicht schon bei 599px sondern knapp über 400px.

Wie kann ich das beheben?

Der CSS-Code:
Code: Alles auswählen
#divaussen &#123;
width&#58; auto;
margin&#58; 10px 130px;
&#125;

#divinnen &#123;
padding&#58; 2px;
margin&#58; 5px;  
border&#58;1px solid #ff9900; 
float&#58; left; 
background&#58; #ffcc33; 
width&#58; 200px;

Laut deinem CSS sind die inneren Divs für den FX aber 5+1+2+200+2+1+5=216px breit. Also bräuchte der FX 648px, damit er 3 divs nebeneinander darstellen kann. *am kopf kratz*
Der IE6 sollte auch 216px haben, wenn er nicht im Quirksmodus landet.
https://de.selfhtml.org/css/formate/box_modell.htm

Desweiteren sind ID eindeutig und dürfen gar nicht mehrfach beim gleichen Typ im Dokument verwendet werden.
https://de.selfhtml.org/css/formate/zen ... ualformate

Mache also erst einmal aus #divinnen ein .divinnen und rufe dies dann mit class auf. Dann können wir weiter sehen.

Beitrag von **ole1210** » 25.09.2006, 19:58

Die 600 Pixel waren doch nur nen Beispiel. Das äussere DIV passt sich doch an die größe de Monitors an!!!!

Und Ob ich jetzt 1 x ID=xyz habe oder 15 Mal ist evtl. nicht richtig, für die Darstellung aber VOLLKOMMEN unerheblich.