div-Höhe an img anpassen / margin-Bezug

[Konze]

Hallo zusammen,

ich habe mein Problem schon in diversen Foren gesucht, aber bin zu keiner Lösung gekommen. Ich hoffe, hier Hilfe zu finden.

Ich will eine Artikelliste erstellen (in etwa so wie auf der Startseite von Spiegel Online). Jeder Artikelblock ist ein eigenes div (das beinhaltet: 2 Überschriften, Bild, kurzer Text). Nun habe ich dem div "Übersicht" ein margin-top zugewiesen, was funktioniert - allerdings nur, wenn der vorangegangene Artikelblock mit Text endet, wenn also der Text länger ist, als das Bild hoch ist. Wenn der Text nicht so lang ist, stimmt der Abstand zum nächsten Artikelblock nicht mehr, weil sich der folgende Block (div id: Uebersicht) eben nicht am Bild, sondern am Text ausrichtet (was im Extremfall sogar dazu führt, dass der folgende Block so weit oben positioniert ist, dass er sogar noch vom float:left beeinflusst wird.

Meine Frage zusammengefasst: Wie kriege ich es hin, dass ein div genau so hoch ist, wie das größte Element, egal ob es Text oder Bild ist? So dass sich das darauf folgende Element eben am gesamten div und nicht nur am Text im div ausrichtet?

Min einem min-height würde es gehen, aber dann müsste ich mich mit der Höhe des Bildes oder der Textlänge festlegen, was ich nicht will.

  
<div id="container">  
 <div id="uebersicht">  
 <h2>h2-Überschrift</h2>  
 <h1>h1-Überschrift</h1>  
 <img class="uebersicht_klein" src="bild.jpg">  
 <div class="uebersicht_vorspann">  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
 </div>  
</div>  
<div id="uebersicht">  
 <h2>h2-Überschrift</h2>  
 <h1>h1-Überschrift</h1>  
 <img class="uebersicht_klein" src="bild.gif">  
 <div class="uebersicht_vorspann">  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
 </div>  
</div>  
</div>

CSS:

#container {  
width: 480px;  
}  
  
h2 {  
margin-bottom: 6px;  
color: #ff9900;  
font-size: 10pt;  
font-weight: bold;  
text-transform: uppercase;  
text-decoration: none;  
letter-spacing: 1.5px;  
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;  
}  
  
h1 {  
color: #333333;  
font-size: 20pt;  
font-family: georgia, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;  
margin: 0 0 8px 0;  
font-weight: normal;  
margin-bottom: 8px;  
}  
  
#uebersicht {  
margin-top: 25px;  
}  
  
.uebersicht_klein {  
width: 140px;  
height: auto;  
border: none;  
float: left;  
margin-right: 11px;  
margin-bottom: 5px;  
}  
  
.uebersicht_vorspann p {  
color: #000000;  
font-size: 10pt;  
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;  
}

Ich hoffe, jemand kann mir helfen. Bin ganz verzweifelt. Danke!

Viele Grüße,
Konstantin

[Konze]

Das zweite img muss natürlich auch "bild.jpg" und nicht "bild.gif" heißen. ;-)

[ChrisB]

Hi,

Ich will eine Artikelliste erstellen (in etwa so wie auf der Startseite von Spiegel Online). Jeder Artikelblock ist ein eigenes div (das beinhaltet: 2 Überschriften, Bild, kurzer Text).

Und warum h2-Ueberschrift vor h1? Das erscheint mir nicht besonders sinnvoll.

Nun habe ich dem div "Übersicht" ein margin-top zugewiesen, was funktioniert - allerdings nur, wenn der vorangegangene Artikelblock mit Text endet, wenn also der Text länger ist, als das Bild hoch ist. Wenn der Text nicht so lang ist, stimmt der Abstand zum nächsten Artikelblock nicht mehr, weil sich der folgende Block (div id: Uebersicht) eben nicht am Bild, sondern am Text ausrichtet (was im Extremfall sogar dazu führt, dass der folgende Block so weit oben positioniert ist, dass er sogar noch vom float:left beeinflusst wird.

Reicht es da nicht, einfach das floating mittels clear wieder aufzuheben?

Meine Frage zusammengefasst: Wie kriege ich es hin, dass ein div genau so hoch ist, wie das größte Element, egal ob es Text oder Bild ist? So dass sich das darauf folgende Element eben am gesamten div und nicht nur am Text im div ausrichtet?

</archiv/2007/1/t143585/#m932279>

MfG ChrisB

[Konze]

Reicht es da nicht, einfach das floating mittels clear wieder aufzuheben?

Hi Chris,

danke für deine Antwort. Ja, das funktioniert. Habe jetzt überall ein clear eingebaut und dem ein margin zugewiesen. Ich hatte ein clear sogar schonmal drin gehabt, das hat aber dann doch nicht richtig funktioniert. Jetzt geht's! *Freu*

Danke!