Frage stellen
es ist nun wirklich ein leidiges Thema, das muss ich euch bestimmt nicht sagen. Ich möchte mich jetzt aber doch - mal wieder - mit CSS und DIVs beschäftigen und es anständig machen, statt 'ne Tabelle zu schustern. Also:
Es ist ein Zwei-Spalten-Layout. Links, wie gewohnt, die Nav Bar, rechts der Content.
Die Nav Bar besteht aus einem DIV mit einigen weiteren DIVs, die Buttons darstellen.
Der Content besteht aus DIVs, die eine Tabelle simulieren. 6 Spalten, 12 Zeilen. Mit "float: left" sieht das auch ganz gut aus.
Das Problem ist nun, wenn eine Zeile einen zu hohen Content hat, dann wird die nächste Zeile nämlich nicht in die nächste Zeile geruckt, sondern bleibt in der vorherigen Zeile, weil da ja noch Platz ist auf Grund des deutlichen Höhenunterschieds (100px vs. 20px).
Wie man das halt so macht, hab ich mit "float" und "display" rumgespielt, hat alles nicht geholfen.
Hier etwas Code, um das Design zu verdeutlichen:
- Code: Alles auswählen
.step, .station, .place, .keyword, .requirement, .reward {
float: left;
width: 140px;
height: auto;
}
.content {
float: left;
width: auto;
}
.row {
<!-- ist noch leer -->
}
...
<div class="content" id="content">
<div class="row">
<div class="step">123</div>
<div class="station">123</div>
<div class="place">123</div>
<div class="keyword">123</div>
<div class="requirement">123</div>
<div class="reward">123</div>
<div> </div> <!-- nachdem ich das eingefügt hatte, funktionierte der Zeilenumbruch erst richtig -->
</div>
</div>
Also wie gesagt, wenn in der Spalte "requirement" der Inhalt 90px hoch ist und Reward und die nächste Step-Zeile nur 20px hoch sind, dann rutscht Step in die Zeile davor,weil da noch Platz ist, und das will ich natürlich nicht.
Wenn ihr mehr Infos braucht, sagt bescheid. Ich gebe gerne weitere Auskünfte
Beste Grüße,
Momro
