Ich möchte gerne auf unserer Website einen guten Freund ehren. doch leider gelingt es mir nicht den Text das Bild umfließen zu lassen
Hier der Code:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Traueranzeige</title>
<style>
.container {
display: grid;
grid-template-columns: auto 2fr;
gap: 5px;
width: 600px;
height: auto;
border: 5px solid #000;
overflow: hidden;
}
.image {
width: 100px;
margin: 15px;
grid-row: span 2;
}
.text {
margin-top: 0px;
}
.text > h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
text-align: center;
margin-bottom: 2px;
}
.text > h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: center;
margin-bottom: 5px;
}
.text > p {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="willi_fit.jpg" alt="Trauerbild" />
<div class="text">
<h2>Willi Ettl</h2>
<h3>geb. 19.03.1948 gest. 23.03.2024</h3>
<p>
Im Alter von 76 Jahren ist unser guter Freund und langjähriges
Mitglied, Willi Ettl, trotz bekannter Krankheit doch sehr unerwartet
von uns gegangen. In über 30 Jahren, davon lange Zeit als
Vereinsrechner hat er Geschichte bei den Angelfreunden-Fischbachtal
geschrieben. Wir wünschen der Familie und den Angehörigen die nötige
Kraft in dieser schweren Zeit. Wir werden Willi Ettl als Mensch stets
in bester Erinnerung behalten und seinem Engagement für den Verein ein
ehrendes Andenken bewahren. <p>Lieber Willi, danke für alles.</p> <p>Im Namen
aller Mitglieder</p>
<p>Die Angelfreunde Fischbachtal.</p>
</p>
</div>
</div>
</body>
</html>
Alles anzeigen
so sieht es aus.
Wie bekomme ich den text dazu das gesamte div einzunehmen. Also der Test soll unterhalb des Bildes auch linksbündig.
Mit Flexbox was ich bevorzugen würde bin ich mehrfach kläglich gescheitert. Das muss doch irgendwie gehen?