Seite 1 von 1
Problem beim Umbruch von Float-DIVs
Verfasst: 24.09.2006, 18:00
von ole1210
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 {
width: auto;
margin: 10px 130px;
}
#divinnen {
padding: 2px;
margin: 5px;
border:1px solid #ff9900;
float: left;
background: #ffcc33;
width: 200px;
Verfasst: 24.09.2006, 18:56
von babasave
Verfasst: 24.09.2006, 19:19
von ole1210
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?
hm...
Verfasst: 24.09.2006, 21:57
von derwebling
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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Divaussen - Divinnen</title>
<style>
#BoxAussen{
display:table;
position:relative;
background-color:#00FF00;
width:90%;
}
#BoxInnen{
display:block;
position:relative;
width:200px;
height:20px;
line-height:20px;
margin:5px;
float:left;
background-color:#FF0000;
}
</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>
Verfasst: 24.09.2006, 22:37
von ole1210
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!
Verfasst: 25.09.2006, 07:55
von derwebling
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!
Verfasst: 25.09.2006, 08:19
von philophax
Könnte das ein Problem der Dokumenttyp-Deklaration sein?
https://de.selfhtml.org/css/formate/box_modell.htm
"Box-Modell-Fehler des Internet Explorers"
Verfasst: 25.09.2006, 08:32
von ole1210
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.
Verfasst: 25.09.2006, 09:05
von derwebling
Geht's jetzt wenigstens? Wenn nicht poste doch einfach mal den ganzen Code.
Verfasst: 25.09.2006, 09:44
von ole1210
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 {
width: 120px;
line-height: 18px;
}
#left {
position: absolute;
left: 10px;
margin:10px 0px;
}
#right {
position: absolute;
right: 10px;
margin:10px 0px;
}
#divaussen {
width: auto;
margin: 10px 130px;
}
#divinnen {
padding: 2px;
margin: 5px;
border:1px solid #ff9900;
float: left;
background: #ffcc33;
width: 200px; }
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: left;"></p>
</div>
Re: Problem beim Umbruch von Float-DIVs
Verfasst: 25.09.2006, 18:34
von Graccem
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 {
width: auto;
margin: 10px 130px;
}
#divinnen {
padding: 2px;
margin: 5px;
border:1px solid #ff9900;
float: left;
background: #ffcc33;
width: 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.
Verfasst: 25.09.2006, 19:58
von ole1210
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.
