Wenn ein Text andere Elemente (meist Bilder) umfließen soll, funktioniert das weder mit Flexbox noch mit CSS-Grid. Die sind ausschließlich dafür gedacht, Elemente, die sich in einer Zeile befinden, nebeneinander darzustellen.
Damit Text (in deinem Fall) ein Bild umfließen kann, ist in CSS float vorgesehen. Das gibt es bereits seit den ersten CSS-Versionen. Um es korrekt zu verwenden muss einiges bedacht werden, wobei die Anwendung in der Praxis dann nicht schwierig ist.
Infos zu float findest du zum Beispiel unter:
Ich habe mal ein Beispiel auf deiner Grundlage erstellt. Da mir dein Bild nicht vorlag musste ich ein anders verwenden. Folge: Da dein Bild eine andere Größe hat musst du eventuell einige Größenangaben anpassen. Aber erst mal ersetzen und dann Änderungen vornehmen. Im CSS-Teil des Quelltextes habe ich Einträge von dir, die stören, auskommentiert und fehlende Angaben hinzugefügt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Float</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
max-width: 1200px;
margin: 0rem auto 0rem auto;
}
figure {
text-align: center;
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
display: inline-block;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
border: 0px;
}
.container {
/*display: grid;*/
/*grid-template-columns: auto 2fr;*/
/*gap: 5px;*/
line-height: 1.4;
width: 500px;
height: auto;
padding: 0 15px;
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;
}
.container > figure {
float: left;
max-width: 95px;
padding: 20px 15px 1px 0px;
}
</style>
</head>
<body>
<header>
<h1>Float - Beispiel</h1>
</header>
<main>
<body>
<div class="container">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Cary_Grant_2_Allan_Warren.jpg" alt="Willi Ettl - Porträtbild">
</figure>
<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>
<p>Lieber Willi, danke für alles.</p>
<p>Im Namen aller Mitglieder</p>
<p>Die Angelfreunde Fischbachtal.</p>
</div>
</div>
</main>
<footer>
<p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/10563-text-soll-sich-im-div-wo-m%C3%B6glich-die-volle-breite-nehmen/">https://www.html-seminar.de/</a></p>
</footer>
</body>
</html>
Alles anzeigen