Problem mit Spalten und deren Länge

Wir sammeln alle Infos der Bonusepisode von Pokémon Karmesin und Purpur für euch!

Zu der Infoseite von „Die Mo-Mo-Manie“

    Hallo,


    ich bin gerade dabei, mich ein bisschen in HTML und CSS wieder einzuarbeiten, da ich in nächster Zeit PHP (vertiefen; habe schon einige Grundkenntnisse) und (My)SQL erlernen will. Aus Spaß und Freude an der Sache will ich eine Website erstellen. Jedoch habe ich beim Design ein Problem. Da ich nun nicht ellenlangen Quellcode posten will, sondern nur den nötigsten, will ich versuchen, mein Problem kurz anderweitig zu erläutern:


    Das Design soll dem Schema nach wie folgt aussehen:


    Mit dem Header, der Navigationsleiste sowie dem Footer hatte ich kein Problem. Ich habe alles schön zentral ausrichten können und allen die gleiche Breite geben können. Nun aber zum Bereich Content und Menü. Hier bin ich wie folgt vorgangen: Ich habe einen Container (#container) erstellt. Darin habe ich dann den Content (#content) und das Menü (#menu) eingebaut, dem #content und #menu eine Breite zugewiesen und #content mit der Deklaration float: left; versehen. Grund bzw. Absicht: Der Bereich bzw. die Box, die den Content und Menübereich enthält, soll beide Bereiche gleich lang wirken lassen, da die Content-Menü-Box einen anderen Hintergrund hat als der Bereich um alle Boxen bzw. die anderen Boxen.


    Das ganze sieht dann so aus: start.html (Auszug)

    Code
    <!-- Bereich Content und Menü --><div id = "container"><!-- Content -->		<div id = "content">			<h1>Willkommen</h1>			<p>Herzlich Willkommen!</p>		</div><!-- Menü -->		<div id = "menu">			<div class = "menuhead">Kategorie 1</div>				<a href="start.html">Punkt1</a>				<a href="start.html">Punkt2</a>				<a href="start.html">Punkt3</a>				<a href="start.html">Punkt4</a>				<a href="start.html">Punkt5</a>			<div class = "menuhead">Kategorie 2</div>				<a href="start.html">Punkt1</a>				<a href="start.html">Punkt2</a>				<a href="start.html">Punkt3</a>				<a href="start.html">Punkt4</a>				<a href="start.html">Punkt5</a>		</div></div>


    bzw. so: format.css (Auszug) (Unwichtiges mit [...] ausgeklammert, z.B. Farbverlauf)


    Nun aber das Problem: Teste ich den Code so, dann hat die Box die Länge der Menü-Spalte. Wir allerdings der Content-Bereich länger als die Menü-Spalte, so steht der Text, der den Content länger macht, über und ragt in den allgemeinen Hintergrund hinein und verschiebt den footer nach unten. Jedoch ist der Überhang eben nicht mehr in der Box enthalten, wie es eigentlich sein sollte.


    Ich denke, dieses Problem ist kein Einzelfall und wäre demjenigen, der mir helfen kann, sehr verbunden.


    Ich bedanke mich im Voraus!


    Viele Grüße!

    Ich habe leider nicht genug Ahnung von den einzelnen CSS-Commands, aber von den Problemen her schätze ich mal, dass die Content-Box falsch eingestellt wurde, sodass sie sich nicht automatisch an den enthaltenen Text anpasst, könnte das sein?

    Vorab entschuldige ich mich natürlich sofort für den Doppelpost, aber ich habe es irgendwie geschafft. Wie denn nun? Ich habe mir im Internet einschlägige Seiten durchgeschaut, die ebenfalls dieses Problem behandelt haben. Irgendwie hat aber nichts richtig funktioniert. Schrittweise hat sich dann aber folgender Weg ergeben:


    Die div's #header, #navigation, #content und #menu werden in einen großen div #container eingeschlossen, der die Breite meines Inhaltsfenster bestimmt. In diesen großen div-Container kommen nun die divs #header und #navigation sowie, eingeschlossen in einen eigenen div-container (habe ihn #container2 genannt) die divs #content und #menu. Dabei hat #content die Deklaration float: left;. Der #footer (clear: both;) kommt im Anschluss an den nun abgeschlossenen #container, aber zuvor habe ich im HTML-Code noch folgendes eingefügt: <div style="clear: both;"></div>. Der HTML-Code sieht nun wie folgt aus:



    Ich bedanke mich dennoch sehr, dass ich mein Problem schildern durfte und sich der ein oder andere vielleicht auch Gedanken darüber gemacht hat. Danke!