ok, I need a fair bit of help... I'm in a web design class at the moment and I've no idea how to get my page to work the way I want it to exactly (since it's design and not java script the teacher isn't very helpful in the area)

What I have
I have two floating text boxes one for the left and one for the right, I have them so they sit under the header and on either side of the center image.
they are also set to scroll if the text goes farther then 600px

What I want to do is make it so that they can be hidden into a very small area
googled a bit and found this code
<script language="javascript">
function toggle(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML =

I just don't know where my code would fit into it
my code is in a css style sheet and for this particular part looks like this

#left { float:left;
width:480px;
height:600px;
overflow:auto;
}
#right { float:right;
width:480px;
height:600px;
overflow:auto;

}

I'd also like to make it so that the floating boxes while staying below my header will float down if the page is long enough to scroll down lower then the header

the final thing I need help with is how to keep my bottom home button glued to the center of the bottom of the page always under everything in the page no matter how long it goes

I found out that it won't do this because before I had the side boxes confined to the same size area as the picture the longer of the two pushed over the bottom button so that it was no longer perfectly in the center

help with any and all of this would be just great