Expanding div and footer problem

[greeneyedesign]

Hello,

 

I'm having a bit of trouble with my expanding left menu overlapping my footer.

 

Picture 1: default view

Picture 2: when expanding the menu, the menu overlaps the footer instead of the footer moving down

 

There are no issues when content in the center column is long, then the footer moves right down. It's only an issue in the left menu not moving down when the menu div expands.

 

Here is my footer style:

 

 

/* Footer */

#footer {

padding: 0em 0;

clear: both;

}

#footer .block_various_links { list-style: none; }

#footer .block_various_links li a{ text-transform:capitalize; font-size:12px; color:grey; text-decoration:none; }

#footer .block_various_links li {

display: inline;

border-left: 1px solid #888;

padding: 0px 2px 0px 4px;

}

#footer .block_various_links li.first_item {

border: none;

padding-left: 0px;

}

#footer-top {

background: url('../img/navigation-back.png') no-repeat top;

width: 925px;

text-align: right;

height: 24px;

color: #666;

font-size: 10px;

padding-top: 7px;

padding-right: 25px;

background-color: #EEE;

}

#footer-top a{

color: #8DBD2B;

font-size: 10px;

font-weight: bold;

text-decoration: none;

}

#footer-top a:hover{

color: #333;

font-size: 10px;

font-weight: bold;

text-decoration: underline;

}

#footer-bottom a{

color: #C5E520;

text-decoration: none;

}

#footer-content {

width: 951px;

background: url('../img/footerdeko.png') no-repeat top;

font-size: 12px;

color: #646464;

margin-right: auto;

margin-left: auto;

height: 100px;

float: left;

}

 

#footer-content a{

color: #666;

text-decoration: none;

}

#footer-content .column1 {

float: left;

width: 100px;

margin-left: 25px;

padding-top: 10px;

}

#footer-content .column2 {

float: left;

width: 130px;

padding-top: 10px;

padding-left: 25px;

}

#footer-content .column4 {

float: right;

width: 80px;

font-size: 11px;

padding-top: 5px;

}

#footer-content .column5 {

float: right;

width: 110px;

font-size: 11px;

padding-top: 5px;

}

#footer-content h2 {

padding-bottom: 10px;

font-size: 22px;

color: #646464;

}

 

#footer-content a {

color: #696969;

}

 

#footer-content a:hover {

color: #C0DF23;

}

 

.list li {

margin-bottom: 6px;

}