code error... need help finding it., I have a div layout and think i messed up one code... page expands too Options

[despite]

This is only my 3rd Div I have ever made so I am a bit new at this....

I have a div... [i would link it but myspace login is down at the moment and my test site is private] ... =\ but i found a css previewer... link here: click? ... and I also provided a series of screen shots of what I am trying to fix... note: pay attention to the scroll bar on the side...

see how there is all that extra room? and make quit expanding too much? how do I get rid of that... this is the section of the code i believe i messed up on.... .background

this part goes in the about me.

CODE

<style>

.background {background-color:transparent; position: absolute; left: 50%; top:

-100px; margin-left:-300px; width: 600px; height: 500px; z-index:1;

visibility:visible !important; overflow:none; border:2px solid black} [/color]

.box1 {background-color:ff99cc; position: absolute; left: 50%; top: 130px;

margin-left:-350px; width: 300px; height: 200px; z-index:2; visibility:visible

!important; overflow:auto; border:1px solid FFFFFF}

.box2 {background-color:ff99cc; position: absolute; left: 50%; top: 130px;

margin-left:-40px; width: 200px; height: 200px; z-index:2; visibility:visible

!important; overflow:auto; border:1px solid FFFFFF}

.box3 {background-color:ff99cc; position: absolute; left: 50%; top: 130px;

margin-left: 170px; width: 175px; height: 510px; z-index:2; visibility:visible

!important; overflow:auto; border:1px solid FFFFFF}


.box4 {background-color:ff99cc; position: absolute; left: 50%; top: 340px;

margin-left: -350px; width: 300px; height: 300px; z-index:2; visibility:visible

!important; overflow:auto; border:1px solid FFFFFF}

.box5 {background-color:ff99cc; position: absolute; left: 50%; top: 340px;

margin-left: -40px; width: 200px; height: 125px; z-index:2; visibility:visible

!important; overflow:auto; border:1px solid FFFFFF}

.box6 {background-color:ff99cc; position: absolute; left: 50%; top: 475px;

margin-left: -40px; width: 200px; height: 165px; z-index:2; visibility:visible

!important; overflow:auto; border:1px solid FFFFFF}
</style>

this goes in the who i'd like to meet section....

CODE

<div class="background">

</div>

<div class="box1">
<span class="head">Blah</span>
</div>


<div class="box2">

<span class="head">BLAH BLAH</span>
</div>


<div class="box3">

<span class="head">BLAH BLAH</span>
</div>

<div class="box4">
<span class="head">BLAH BLAH</span><br>
</div>


<div class="box5">
<span class="head">blah blah</span>
</div>

<div class="box6">
<span class="head">BLAH BLAH</span>
</div>

I had it working earlier, with a differnt layout but then i changed it around it like started doing that long expanding thing again... and I dont know what i did... does anyone know how to mad it cut off about 10px after the bottom of the boxes? I dont like how the page keeps expanding... it makes it look crummy.


Oh gosh, I hope that wasnt too a confussing question... i tried to make it as detailed as possible but im afraid i may have just made it too confussing...

in simpler terms my question is: how do i get rid of all that extra scroll bar...

[despite]

bump?