• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mehrere Boxen jeweils mit Bild, H1 und P darin - untereinander angeordnet

Tueftler

Neues Mitglied
Hallo Webmasters,

ich bin Anfänger in HTML und CSS und möchte ein Layout wie folgt erstellen.

Ein Div über die ganze Breite der Website.
Darin:
-links ein Bild
-rechts daneben eine Überschrift und unter der Überschrift ein Paragraph (beides zusammen in etwa so hoch wie das Bild).

Hier mein HTML:

<div class="content">

<article>
<div class="article">
<img src="img/bidl1.jpg" class="bild" alt="office">
<h1>Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</article>

<br> <!--Break-Tag nur eine Notlösung, um nachrücken des Paragraphs zu verhindern.-->

<article>
<div class="article">
<img src="img/bild.jpg" class="bild" alt="geheim">
<h1>Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</article>

<br> <!--Break-Tag nur eine Notlösung, um nachrücken des Paragraphs zu verhindern.-->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

</div>

Hier mein CSS:

.bild {
margin-right:15px;
width:30%;
height:auto;
float:left;
}
.article {
width:100%;
margin:40px auto;
}
.article h1 {
font-size:30px;
}

Problem:
Die Anordnung innerhalb des ersten article-Divs passt so weit. Aber der Inhalt des zweiten "article" containters rutscht nach oben direkt unter den <p> des vorherigen divs. Der Margin-Abstand des Article-Divs ist da, aber die Inhalte des 2. Article rutschen in den ersten. Wenn ich ein popliges <br> dazwischen baue, sieht es zwar korrekt aus, aber da gibts bestimmt eine elegantere Lösung.

Das ist hier jetzt nur ein Beispiel. Was habt Ihr allgemein für Tipps, dass Container mit verschiedenen Inhalten (Bilder und Paragraphs, Überschriften usw.) untereinander oder nebeneinander oder auch in anderer Andordnung responsive platziert werden können, ohne dass die Inhalte sich ungünstig verschieben.

In Grid, Flex und hier eben float hab ich schon reingeschnuppert, aber für dieses Beispiel finde ich gerade keine Lösung.

Hoffe auf Eure weisen Ratschläge.

Vielen Dank im Voraus
Markus
 
Werbung:
Hey Sempervivum,
erneut hast Du mir den Weg erleuchtet. Vielen Dank für die Hilfe.

Das <figure> und <figcaption> passt für meine Zwecke wirklich absolut perfekt und die Flexbox ist ja eine echte Zauberkiste. Bin grad am experimentieren.

VIELEN DANK, Du genialer Typ! :cool:
 
Zurück
Oben