"Tabelle" mit DIV-Containern

[FunkyMonkey]

Hallo

ich erstelle Tabellen mit DIV-Containern, was eigentlich auch gut funktioniert.

4 DIV-Container liegen nebeneinander und sind alle mit "float:left" ausgestattet, was dazu führt das sie brav nebeneinander erscheinen. Alle 4 werden nochmal von einem ganz großen DIV umschlossen.

Dies repräsentiert jeweils eine Zeile. Dann kommt die nächste, wieder genauso. Jede "Zeile" ist 90px hoch und in allen DIV's wird die Höhe auf 90px gesetzt.

Problem: Wenn das Browserfenster zu sehr verkleinert wird, rutscht das letzte DIV-Element unter das erste, also von rechts nach links unten. Die Tabellenoptik kommt völlig durcheinander, das blanke Chaos bricht aus und der Rest der noch übrig bleibt sind fetzen von überlagerten Texten.

Wie kann man den Browser dazu zwingen die DIV-Elemente aneinander zu reihen, und bei Bedarf eine horizontale Scrollbar einzublenden anstatt die "Zeile" zu zerhacken?

Die Zeile aus DIV-Elementen soll den verfügbaren horizontalen Platz voll ausnutzen, deshalb kann ich keine festen Breiten vergeben...

 

[Maik]

Hi,

ohne jetzt den Quellcode gesehen zu haben, empfehle ich dir, für das übergeordnete DIV eine Mindestbreite einzurichten.

 

[FunkyMonkey]

Hallo,

besten Dank! Das hat was gebracht

*edit:* leider nur im Firefox, der MSIE ignoriert die min-width Angabe. Auch ein Spacer-GIF zur Aufweitung des Viewports (erzwingen der Scrollbar) brachte nichts, da der MSIE die DIV's trotz Scrollbar zusammenpresst.

Das sind meine DIV-Container bzw. deren CSS Quellcode:

.uebergeordnetes_div {
	height:90px;
	max-height:90px;
	min-width:550px;
	margin-bottom:20px;
}
.div1 {
	float:left;
	width:120px;
	height:90px;
	margin-right:10px;
}
.div2 {
	float:left;
	width:50%;
	height:90px;
	margin-right:10px;
}
.div3 {
	float:left;
	height:90px;
	width:140px;
}

die DIV's sind im Quellcode untereinander weg notiert und enthalten Text. Ist der Viewport groß genug erscheinen sie nebeneinander...

 

[Maik]

Hi,

der MSIE ignoriert die min-width Angabe.

das trifft aber nur auf die älteren IE-Versionen zu, denn der aktuelle IE7 unterstützt nun die min-width-Eigenschaft.

Für seine Vorgängerversionen empfehle ich dir http://www.cssplay.co.uk/boxes/minwidth.html.