CSS Spaltenlayout zwei Spalten gleiche Länge mit float

    Hallo!

    Ich brauche jetzt mal eure Hilfe, weil ich einfach nicht weiterkomme.
    Ich versuche gerade, eine Seitenlayout aus css-Boxen zu bauen, da ich gehört habe, dass Tabellen eher nicht mehr benutzt werden sollen. (habe früher immer mit Tabellen gearbeitet, aber wollte mich mal an Boxen probieren)

    Es geht jetzt darum, dass die Inhaltsbox aus zwei Boxen besteht. Wenn die eine länger ist als die andere, soll die zweite trotzdem mitwachsen.

    Ich halte mich an dieses Beispiel:

    http://aktuell.de.selfhtml.org/weblog/css-spa…echsel-zu-float
    Beispiel 4:
    http://aktuell.de.selfhtml.org/weblog/files/2…-beispiel4.html

    Nun ist es in meiner Umsetzung so, dass wenn ich an der Stelle:

    HTML
    #container {margin: auto; margin-top: 20px; width: 878px; border:1px solid #bfd1e8; background-color:#daeaff; }[code lang=css]

    den border komplett entferne, das mitwachsen nicht mehr funktioniert.
    Das verstehe ich nicht. Das heißt ja wohl, dass irgendwo in meinem code ein Fehler sein muss.

    Außerdem wachsen beide Spalten nicht mit, wenn die linke länger wird, sondern nur, wenn die rechte länger wird. Das ist in dem Beispiel aus selfhtml nicht so.

    Ich weiß, dass ich, wenn ich zwei Hintergrundfarben habe, der Haupt-Container-Box (#container) ein Hintergrundbild geben muss, ich habe jetzt aber erstmal nur eine Farbe drin, weil ich erstmal noch an dem Code selbst rumprobiere, das Bild kommt dann später.

    Ich glaube ich habe das mit float und den positons noch nicht so richtig verstanden, das ist mir aber erstmal egal, solange ihr mir helft meinen code zum laufen zu bringen ;)
    ich muss auch nicht unbedingt float verwenden, hauptsache, die sache funktioniert!

    Was mache ich bloß falsch? Bitte helft mir!!!

    Viele Grüße
    Josefine

    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"       "http://www.w3.org/TR/html4/loose.dtd"><html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Test</title><style type="text/css">body {font-family: verdana, arial; color:#000000; font-size: 10pt; color:black; background-color: #bfd1e8; }#container {margin: auto; margin-top: 20px; width: 878px; border:1px solid #bfd1e8; background-color:#daeaff; }.grossblau {        color:#003059; font-size: 20pt;}#seiten {        top: 25px;        left: 0px;        height: 240px;        width: 100%;        background: #7798bc;        position: absolute;        border: 2px;        border-style: solid;        border-color: #bfd1e8;}#oben {                        top: 20px;                height: 240px;                width: 876px;                background-image: url(bilder/startseite.jpg);                position: absolute;                border: 5px;                border-style: solid;                border-color: #bfd1e8;                text-align: top;                color: #003059;                }#kopfunten{        margin-top: 160px;        height: 10px;        width: 866px;        padding: 5px;        font-size:11pt;        text-align: center;        word-spacing: 1.4em;}#links {margin-top:250px; width: 200px; padding: 5px; float:left; }#rechts {margin-top:250px; width: 667px; padding: 5px; margin-left:205px; background-color:white;}p { margin:0; }</style></head><body><div id="seiten"></div><div id="container"><div id="oben"><div class="grossblau">www.test.de<br></div>Test Test Test Test<div id="kopfunten"><a href="index.html">Test</a> <a href="seiten/wohnunga.html">Test</a> <a href="seiten/wohnungb.html">Test</a> <a href="seiten/reihenhaus.html">Test</a> <a href="seiten/umgebung.html">Test</a> <ahref="seiten/mietwagen.html">Test</a> <a href="seiten/kontakt.html">Test</a> <a href="seiten/impressum.html">Test</a></div></div><div id="links">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</div><div id="rechts"><div class="rechts"><p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test testtest test test test test test test test test test test test</p></div></div></body></html>

    Hallo Dodo,


    danke für die schnelle Antwort.
    ich weiß, dass es ein altbekanntes Problem ist, habe auch schon viel gegooglet und deinen Artikel habe ich ebenfalls schon gelesen (vielleicht nicht aufmerksam genug?).
    Ich verstehe das so, dass man zwei Boxen in eine Hauptbox tut, die eine Hintergrundfarbe/bild hat, die dann ja logischerweise immer größer wird, sobald der Inhalt größer wird.


    Das will bei mir aber einfach nicht funktionieren :((((


    Falls jemand mal Lust hat, möge er sich ja mal meinen Code angucken.


    Ansonsten versuch ich den Artikel noch mal aufmerksam zu lesen und meinen Fehler zu finden.
    Nur manchmal macht man ja immer den gleichen Fehler und übersieht ihn dann ganz einfach, deswegen wollte ich so gerne individuelle Hilfe von euch haben ;)

    hey hey,

    alles klar, habs jetzt hinbekommen.
    Habe meinen Fehler aber nicht gefunden, weil ich noch mal komplett neu begonnen habe und den Code aus dem Artikel verwendet habe.

    Danke!