Wie positioniere ich die HTML-Elemente richtig?
In meinem body sind 4 Elemente enthalten: side, menu, content und foot.
Die Elemente sind mittels floats anzuordnen, sodass side links angeordnet über die komplette Höhe der Webseite erstreckt. menu, content und foot sind in dieser Reihenfolge untereinander auf der rechten Seite.
Daher habe ich die CSS wie folgt angelegt:
body {
position: absolute;
height: 100%;
}
side {
float: left;
width: 20%;
height: 100%;
}
menu, content, foot {
float: right;
width: 80%;
height: auto;
}
Mein Problem hierzu: Wenn ich im Content einen riesigen Text reinschreibe, so zieht sich dieser in der Höhe auseinander. Gut. Aber Mein side wird deshalb nicht länger. Warum ist das so und was kann ich dagegen tun?
edit: So soll es immer aussehen:
schreibe ich jedoch viel in den content-teil rein, so erscheint es so:
Ziel ist es, zu verstehen warum side sich nicht auch verlängert, wenn doch eigentlich height: 100% angegeben wurde.
1 Antwort
In diesen beispiel funktioniert es https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox
.
In diesen nicht https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float
Ich verstehe, es wird nicht breiter weil die Breite 20% und 80% bleibt egal welcher Inhalt es ist.
Man könnte das <pre> tag verwenden was auch nicht ideal ist, dabei ist der text genauso wie im Quellcode(zeilenumbruch bleibt zeilenumbruch... ) und dann noch mit responive design
weder das <pre>-Tag noch Responsives Design oder Annotationen soll ich für diese Aufgabe verwenden, da es noch nicht thematisiert wurde.
Mein Problem habe ich eben editiert. So ist es vielleicht besser sichtbar. Das Problem ist nicht in der Breite, sondern die feste Höhe des <side>-Tags.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.sidebar {
width: 200px;
background-color: #f0f0f0;
}
.content {
flex-grow: 1;
display: inline-block;
max-width: 100%;
padding: 20px;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- Sidebar-Inhalt hier -->
<h2>Seitenpanel</h2>
<p>Einige Informationen</p>
</div>
<div class="content">
<!-- Textbereich mit anpassbarer Breite -->
<h2>Textbereich</h2>
<p>Hier ist der Text, dessen Breite sich automatisch anpassen soll, wenn er länger wird.</p>
<p>Ein weiterer Absatz mit etwas längerem Text, um die Anpassung der Breite zu demonstrieren.</p>
<p>Noch ein Absatz.</p>
</div>
</div>
</body>
</html>
ChatGPT wusste die Lösung
du musst die falsche Frage gestellt haben, ich möchte NICHT die Breite anpassen so wie im Linkbeispiel oder in dem ChatGPT-Code, es geht um die Höhe! Die Breiten sind fix und sollen fix bleiben. Siehe Bilder.
Vielen Dank trotzdem, dass du dir Mühe gibst :thumbup:
Danke für den Link, auf dieser Seite war ich ebenfalls, allerdings half mir das bei meinem speziellen Problem nicht wirklich weiter.