Probleme bei größen von Divs

[ein Ivan ^-^]

Bei der Erstellung einer Website ist mir ein kleines Problem unterlaufen...

Ich habe einen Haupt div (#site) welcher den Hauptteil der Website einfassen soll, in diesen habe ich, mittig zentriert einen contentdiv eingefügt (zentriert mit margin: auto;) die höhe is auf 'auto'.
über und unter dem contentdiv habe ich eine navigationsleiste und einen footer erstellt, diese grenzen jeweils an die site und den contentbereich. nun bin ich dabei eine Sidebar links neben dem Contentbereich zu erstellen, ich habe es bereits hinbekommen das die sidebar neben dem content liegt ohne das dieser verschoben wird, allerdings habe ich nun das problem, das ich es gerne so programmieren würden, das, sobald der 'sidebox' container länger wird als die eigentliche site, sich die site der größe anpasst. Allerdings müsste der contentbereich dabei auch wachsen, damit zwischen content und footer nicht die eigentliche site zu sehen ist.
Es folgen wichtige CSS codes und Quelltextcodes:

CSS:

#site { /*brauner hintergrund*/
    width:1200px;
    height: auto;
    background: brown;
    position: relative;
    left: 50%;
    margin: 0 0 0 -600px;
}

#nav { /*navigationsleiste*/
    width: 100%;
    height: 50px;
    background: #ffff11;
    position: relative;
}

#sidebar1 { /*weiße box links*/
    width: 180px;
    height: auto;
    background: white;
    padding: 10px;
    position: relative;
    float: left;
}

#content { /*bereich mit text und bildern*/
    width: 780px;
    top: auto;
    height: auto;
    position: relative;
    background: green;
    padding:10px;
    margin: auto;
}

#auto1 { /*bilder*/
    width: 300px;
    height: auto;
    top: 12px;
    left: -4px;
    position: relative;
}

#auto2 { /*bilder*/
    width: 300px;
    height: auto;
    top: -5px;
    position: relative;
    margin: 0 0 0 488px;
}

#footer { /*blaue fußzeile*/
    width: 100%;
    height: 50px;
    top: 0px;
    background: blue;
    float: bottom;
    margin: 0 0 20px 0;
}

HTML:

<div id="site">
           
            <div id="nav">
           
            </div>
            <div id="sidebar1">
            <p class="font1" align="justify">
              text.... 
            </p>
            </div>
           
            <div id="content">
                <div id="auto1">
                    <img src="images/auto1.jpg" align="left" vspace="10px" hspace="6px">
                </div>
                <h1>Lorem ipsum dolor sit amet</h1>
            <p class="font1" align="justify">
               text
            </p>                
                <h1>At vero eos et accusam et justo</h1>
                    <div id="auto2">
                        <img src="images/auto2.jpg" align="right" vspace="10px" hspace="10px">
                    </div>
            <p align="justify" class="font1">
                text
            </p>
            <p align="right" class="autor">Bericht von: Ivan </p>
            </div>
            <div id="footer">
                <p align="center" class="footer">
                    Pre-Alpha v3.0 &#40;revised sidebar&#41; by Ivan
                </p>
            </div>
           
        </div>

ich hoffe mithilfe des screenshots kann man sich das ganze besser vorstellen:

 

[Cheffchen]

Hallo,

ein link währe hilfreicher :O).

ein möglichkeit währe display table.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Cheffchen

 

[ka9de]

ohne es getestet zu haben: #site braucht keine height sondern eine min-height. Der Content dings bekommt height 100%.
PS: Ich empfehle dir ein Windows Upgrade. :)