Hallo,
ja - die Überschrift klingt komisch.
Beim Float wird ja gar nicht die Höhe beeinflusst.
Aber ich erkläre euch mal genauer worum es mir geht.
Schaut euch folgendes Bild einmal an:
html-seminar.de/woltlab/attachment/855/
Wie ihr sehen könnt sieht das alles super aus
Jetzt habe ich aber den Fall, dass die Überschriften und Texte dynamisch erzeugt werden.
D.h. ein zwei Zeiler als Überschrift ist gar nicht mal so selten.
Leider sieht dann das Ergebnis wie folgt aus:
html-seminar.de/woltlab/attachment/857/
Das Ziel welches ich erreichen möchte ist, dass nur der Div-Block nach unten rutscht, welcher vom Obigen runtergedrückt wird.
Jetzt sehen wir ja, dass Imo 5 und Imo 6 nach untenrutschen. Das finde ich sehr schlecht... Auch der Abstand zwischen beiden Div-Block Reihen ist unschön.
Wieso ich euch mit so einer Frage belästige:
Ich habe ein Projekt bei dem genau dieser Fehler auftritt.
Die Immobilien rutschen auch komisch runter, wenn man die Überschriften vergrößert.
Projekt-Dev-Startseite
Das komische an der Geschichte, dies passiert nur auf der Startseite. Auf einer Unterseite ist dies nicht der Fall.
Projekt-Dev-Unterseite
Ich habe schon alles versucht was mir bekannt ist. Ich finde einfach nicht den Unterschied zwischen Unterseite und Startseite.
Hier noch mein CSS / HTML Code von meinem ersten Beispiel:
<html>
<style>
.container{
width:750px;
margin:0 auto;
}
.container .immobilie{
width:33.33%;
float:left;
border:1px solid #000;
box-sizing:border-box;
}
</style>
<body>
<div class="container">
<div class="immobilie"><h1>Imo 1</h1><p>Schöner Text</p></div>
<div class="immobilie"><h1>Imo 2 lange Überschrift</h1><p>Schöner Text</p></div>
<div class="immobilie"><h1>Imo 3</h1><p>Schöner Text</p></div>
<div class="immobilie"><h1>Imo 4</h1><p>Schöner Text</p></div>
<div class="immobilie"><h1>Imo 5</h1><p>Schöner Text</p></div>
<div class="immobilie"><h1>Imo 6</h1><p>Schöner Text</p></div>
</div>
</body>
</html>
Alles anzeigen