[CSS] Div Float

[byte]

Hi,

ich male ein Balkendiagramm mit Div-Containern. Ein Balken besteht aus maximal drei Divs mit jeweils einer anderen Hintergrundfarbe. Die Breite der Divs setze ich dynamisch in der JSP.

#BAR-GREEN {
	float: left;
	background-color: green;
}

#BAR-BLUE {
	float: left;
	background-color: blue;
}

#BAR-RED {
	float: left;
	background-color: red;
}

Nun das Problem:
Die Divs liegen nebeneinander in einer Tabellenzelle. Ist die Browserseite zu schmal, so verkleinert sich die Tabellenzelle und die Divs sind nicht mehr nebeneinander sondern untereinander (weil die Breite der Divs nicht mehr nebeneinander in die Zelle passt). Das zerschießt mir natürlich das Diagramm. Ich möchte, dass die Divs immer nebeneinander bleiben und habe versucht, die Spaltenbreite fix einzustellen:

<td style="width: ${diagramWidth}px; min-width: ${diagramWidth}px; max-width: ${diagramWidth}px;">...</td>

Die min/max Werte ignorieren die Browser jedoch erfolgreich.

Hat jemand eine Idee, wie ich es hinkriege, die floatenden Divs nicht einrücken zu lassen?

TIA byto

 

[HLX]

Welchen Browser verwendest du?

Der IE kann bis Version 6 mit 'min-width' und 'max-width' nichts anfangen. Hierfür habe ich allerdings schonmal eine Javascript Lösung im Netz gefunden. Ich weiß nur nicht mehr wo, aber wenn du Google fragst, wirst du sie finden.

Ich bin mir allerdings nicht sicher, ob das das Problem ist, da der IE bei fixen Größen eigentlich keine solchen Probleme bereitet.

Du solltest deine Elemente noch positionieren (am besten relative), vielleicht hilft das.

 

[byte]

Ich hab jetzt eine Lösung gefunden. Ich kapsel die Balken-Divs nochmal in einem Div und geb dem ne feste Breite. Dann klappt es.
Ich schätze es liegt daran, dass Tabellenspalten feste Breiten nicht so mögen, da sich der Table ja auch größentechnisch dem Browserfenster versucht anzupassen.

Trotzdem danke für Deine Hilfe.