Endnu et css spørgsmål.

Ja så er jeg her igen med et css spørgsmål.

Jeg står for programmeringen af xhtml og css til vores webshop, læser til multimediedesigner, og er stødt ind i et problem...

Sidens 2 indholdsdivér har rykket sig ud i højre side, de skulle jo være under banneret, som forresten bare er et midlertidigt test banner...

Siden er at se her:

http://soederberg-webdesign.dk/exellence2/index.php

Det ser lidt bedre ud i firefox men i ie7 ser det helt forkert ud...

Jeg aner simpelthen snart ikke hvor jeg skal rette i cssén, som jeg poster her:

/* CSS Document */
html, body {
    margin: 0;
    padding: 0;
    }
   
body {
    background-color: #5d6fb7;   
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    }
   
#content    {
        position: relative;
        width: 900px;
        height:100%;
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: #4c4a4b;
        margin-left: auto;
        margin-right: auto;
        top:0px;
        }
       
#banner {
    position: relative;
        width: 900px;
        height: 150px;
        border-color:#FFFFFF;
        border-bottom-width: medium;
        border-bottom-style:solid;
        background-image: url(images/exellenceBannerTest.jpg);
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        }           
   
#Images div img
{
float:left;
/* sæt evt fast højde og bredde, for at de står flot */
}

#indhold {
           
        background-color: #4C4A4B;
        top:150px;
        width: 900px;
        border-top-color: #FFFFFF;
        border-top-width: medium;
        position:fixed;
        }

       
       
#venstre {
        position: absolute;
        z-index: 3;
        top:0px;
        float: left;
        width: 500px;
        margin: 60px 25px 25px 25px;
        }
       
#hojre {
        position: absolute;
        z-index: 3;
        top:0px;
        right: 0px;
        float: right;
        width: 320px;
        margin: 60px 25px 25px 25px;
        }       




#menu {
position: absolute;
z-index: 5;
top: 7px;
width: 100%;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 8em;
float: left;
}


#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
text-transform: uppercase;
}

#menu a {
color: #ffffff;
text-decoration: none;
}

#menu a:hover {
color: #5d6fb7;
}

<!--Position af menu-->
#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
top: 0;
left: 100%;
}

<!--Gemme og vise menuen-->
div#menu ul:hover ul,
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul:hover ul,
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

</style>

<![endif]-->


#gradient{
            position:relative;
            z-index: 1;
            }



Er der et klogt hoved der kan se hvad jeg har gjort galt?

Tusind tak på forhånd. lone