Hilfe für meine Navigation

[banjam]

Hallo zusammen! Ich habe ein kleines Problem mit dem css meiner page und ich hoffe, jemand kann mir helfen. Die Seite als solches hat zwei horizontale (nav1 und nav2) und darunter eine vertikale Navigation (nav3). Wenn der inhalt im weißen kasten länger wird, passt sich dieser an und es steht alles schön im weißen Kasten. Sobald aber die vertikale Navi3 (links) länger wird, passt sich der Seiteninhalt nicht der Länge an und die Navigationspunkte stehen unter dem weißen Kasten (Inhalt). Ich habe schon so viel ausprobiert aber ich finde keine Lösung das Problem zu beheben.

Mein html sieht so aus:

<div id="header2">
    <div id="logo">
        <a href="http://www.nachtgeyst.de"><img src="logo-nachtgeyst.png" alt="" /></a>
    </div>

<div style="background-image:url(header.png); margin-top:150px; padding:20px">
    </div>
</div>
<!-- header zu ende -->
<!-- hier beginnt die horizontale navigation -->
<!-- Hauptnavigation -->

<div id="content">
    <div id="navigation">
        <div id="navi">
            <ul id="mainNav1" class="mainNav1">
            </ul>
            <var>navigation[1|2|3]</var>
            <div id="nav3">
                <ul id="mainNav3" class="mainNav3">
                </ul>
            </div>
        </div>
    </div>
    <!-- Hauptnavigation zu Ende -->
    <!-- Hier ist die Mitte-->

<div id="hintergrund-oben">
    </div>

<div id="hintergrund">
        <div id="content2">
            <!-- container mit hauptinhalt -->

<div id="haupt-content">
                <var>content</var>
            </div>
            <!-- ende von Hauptinhalt-->
            <!-- hier steht die Sidebar -->

<div id="sidebar">
                <div id="footer">
                    <var>sidebar</var> <var>footer</var>
                </div>
            </div>
            <!-- Sidebar zu Ende -->
        </div>
    </div>
</div>
<!-- hier ist der Footer-->

<div id="contentfooter">
    <div class="gutter">
    </div>
    <!-- Hauptinhalt zu Ende -->
</div>

Hier mein css der Navigation:

------navigation---------------
div#navi{

height:250px;
    width:1200px;
    left: 50%;
    margin-left: -600px;
    clear:both;
    z-index: 50;
}

ul.mainNav1 li a{
    color: #775823;
    display: block;
    text-transform: uppercase;
    font: 12px/140% Verdana,Geneva,Arial,Helvetica,sans-serif;
    text-decoration: none;
    width: 150px;
    text-align: center;
    clear: left;
 }

div#navi ul.mainNav1 {
    height:75px;
    margin-top:-60px;
    padding-bottom:20px;
    z-index:50;
    clear:both;
}

div#navi ul.mainNav2 {
    margin-top:100px;
    height:62px;
    z-index:50;
    clear:both;
}

ul.mainNav1 a {
        background-image: url(link-bg.png);
        background-repeat:no-repeat;
text-decoration:none;
color:#889f2a;
        height:70px;
        z-index:50;
}

ul.mainNav2 a {
        background-image: none;
        border-bottom: 1px dotted #6c5020;
        margin-top:15px;
text-decoration:none;
color:#6c5020;
        height:32px;
        z-index:50;
}

ul.mainNav1, {
    left: 50%;
    margin-left: -550px;
    width:1100px;
    z-index:50;
}

ul.mainNav2{
    height:62px;
    position:absolute;
    left: 50%;
    margin-left: -550px;
    width:1100px;
    z-index:50;
}

ul.mainNav1 li, ul.mainNav2 li {
    display: inline;
    margin: 0;
    padding: 0;
    float:left;z-index:50;
}

ul.mainNav1 li, {

display: inline;
    margin: 0;
    padding: 0;
    float:left;
height:20px;
z-index:50;
}

li #cc-nav-view-1174138080 {
height:15px;
}

ul.mainNav2 li ul {

background-repeat:no-repeat;
height:50px;
    margin-top:50px;
    margin-left: -100;

width:50px;
z-index:50;
}

ul #mainNav2 li ul{
    display:inline;
    position:absolute;
    padding-left:0px;
    right: 95%;
    margine-right: -150px;

z-index:50;
}

ul.mainNav1 a.current {
    font-weight: bold;
color:#ffffff;
z-index:50;
}

ul.mainNav2 a.current {
    font-weight: bold;
color:#6c5020;
z-index:50;
}

ul.mainNav1 li a {
    padding-right: 14px;

float: left;
padding-top:55px;
z-index:50;
}

ul.mainNav2 li a {
    padding-right: 14px;
width: 70px;
    float: left;
padding-top:10px;
z-index:50;
}

ul.mainNav2 li a {

color: #6c5020;
    display: block;
text-transform: uppercase;
    font: 11px/140% Verdana,Geneva,Arial,Helvetica,sans-serif;
    text-decoration: none;

clear: left;
z-index:50;
}

ul.mainNav3 li a {
    padding-left: 20px;
    padding-top:0px;
    width: 150px;
    float: left;
    padding-top:20px;
    text-align:left;

z-index:50;
}

div#navi ul.mainNav3 {
margin-top:100px;
height:auto;
display:block;
clear:both;
z-index:50;
}

div#navi ul.mainNav3 li a {

width: 250px;
height:20px;
z-index: 50;
padding:0px;
margin:0px;
border:none;
}

div#navi ul.mainNav3 li {
    height: 20px;
    z-index: 50;
}

.mainNav3 ul li {
height:20px;
padding:0px;
margin:0px;
z-index: 50;

}

.mainNav3 ul {
height:100%;
padding:0px;
margin:0px;
z-index: 50;

}

.mainNav3 {
height:auto;
width:300px;
}

a:link, a:visited {
    color: #00889C;
    text-decoration: underline;

}
a:link, a:visited {
    color: #EC4413;
    text-decoration: underline;
}

ul.mainNav1 a:hover {
        background-image: url(hover-link-bg.png);
text-decoration:none;
color:#deaf5f;
        height:32px;
}

ul.mainNav2 a:hover {
        background-image: none;
text-decoration:none;
color:#deaf5f;
        height:32px;
}

div#nav3{
border:solid 1 px #fff;
width: 200px;
position: absolute;
right: 0;
bottom: 0;
margin: 0;
padding: 0;

}

Ich freue mich auf eure Antworten. Beste Grüße
B.