Hi zusammen
@noob,t.ockert
Ich habe auch schon auf einigen Sachen an der Problematik rumgebastelt und gesucht.
Threadi hat es schon angetönt.
Wenn der Umgebende Div keine fixe Breite hat, wird es nicht funktionieren.
Bei mir ist auch vieles Dynamisch da ich mit ASPX (ASP.NET 2.0) arbeite. Teilweise musst du aber auf die einte oder andere Art in den sauren Apfel beissen;
Position Absolut um auf den zweit-thread von noob zu antworten zerreisst dir sowieso alles. Hier wirst du auch sehr schöne Probleme bekommen wenn du zwischen IE7 und Firefox wechselt. Das sieht dann jeweils ganz anders aus.
Ich kann mir den Luxus leisten Firefox nicht ins Layout einzubeziehen.
Um auf die Grundproblematik zurückzukommen;
Ich mach hier n kleines Beispiel mit 2 Divs (ist eigentlich egal wieviele);
BasisProblem;
Die meist vorgeschlagene Möglichkeit 2 divs nebeneinander zu positionieren ist; beiden Divs das Float Left zu geben:
HTML-Code:
<div id="container">
<div style="height: 100px; width: 100px; background-color: red;float:left"></div>
<div style="height: 100px; width: 100px; background-color: blue;float:left"></div>
</div>
Wenn du nun den Browser kleiner machst als die 200 Pixel, dann wird das "rechte" Div unter dem linken Div angezeigt, da es "Fliesst". --> Und blöder weise ist "fliessen" die vorgeschlagene Möglichkeit die nebeneinander darzustellen.
Nun schau dir folgendes an;
HTML-Code:
<div id="container" style="width:200px">
<div style="height: 100px; width: 100px; background-color: red;float:left"></div>
<div style="height: 100px; width: 100px; background-color: blue;float:left"></div>
</div>
Die Divs fliessen nun nicht mehr da der Container ne fixe breite hat. Ohne diese fixe Breite, nix nebeneinander.
Mein Vorschlag, auch wenn ich hier wohl Kritik ernte;
Nimm Tabellen.
Denn wenn du die Div Breite nicht fix setzen kannst, resp. der Inhalt die Breite definieren soll, gehts net so wie dus willst.
Beispiel;
HTML-Code:
<table>
<tbody>
<tr>
<td><div style="height: 4px; width: 100px;background-color: red"></div></td>
<td><div style="height: 4px; width: 100px;background-color: blue"></div></td>
<td><div style="height: 4px; width: 100px;background-color: fuchsia"></div></td>
</tr>
</tbody>
</table>
Die Divs in diesem Beispiel haben ne symbolische breite von 100px, in deinem Beispiel wird der Inhalt vielleicht dynamisch sein, mir gehts darum dass du der Tabelle keine Breite gibst und sie nicht floated, sonst was machst und der Browser Scrollbars anzeigt wenn nicht alles Platz hat.
Gruss
@Edit Ein Beispiel entfernt das nicht zum Thema passt.