CSS issue - my DIV remains collapsed!

On the home page of my site - www.mobiuspc.com, I have several separate sections that I color coded so I can see how it all goes out. There is a homepage section that works great (its tan with buttons like "Components", etc.) And at this level everything works as I could wish.

Down at the bottom I have some problems. There are 3 primary DIVs that I use to paginate:

<div id="mainarea" runat="server" >

      

        
        
        
      

    

It is somewhere between the header / home page area and the yellow area. This large area is assumed to be 700 pixels high by 1,024 pixels wide and colored silver. If you go to the site, you will see that it is not. There is a panel with a repeating image of the hard drive, i.e. my drag area for the Drag 'n drop function (unrelated to this question). I configured it to runat server because if I don't then Drag 'n Drop seems to break.

<div id="categorybar">

      

        
        
        
      

    

This is the yellow area that contains all my buttons. I'm happy with it. Click the Display button and see what happens to the DIV above it. This is out of scope! My CSS to set its width and height seems to be overridden.

<div id="detailbox">

      

        
        
        
      

    

This is a blue area, no problem here. Eventually, I'll put the controls here, but for now it's fine being blue.

Initial thought may be that my CSS is confusing. If so, I can't see where! I set the height / width and all that was good. I tried adding float: left to random sections with no effect. Here are relevant excerpts from my CSS file "

#mainarea
{
background-color:Silver;
height:700px;
width:1024px;
}

#categorybar
{
background-color:Yellow;
height:80px;
width:1024px;
}

#detailbox
{
background-color:Blue;
height:420px;
width:1024px;
}

      

        
        
        
      

    

I create objects at runtime when you click the Show button and all these objects are added to the panel that is in the #mainarea DIV. This panel is known as the toolbox and here are its CSS properties:

#toolboxpanel
{
height:700px;
width:324px;
max-height:700px;
max-width:324px;
overflow:scroll;
}

      

        
        
        
      

    

For some reason, it keeps expanding beyond its predefined size as I add controls at runtime, instead of just having a scrollbar as I would prefer. A panel with all images on the hard drive as a drop zone, which is also in the #mainarea DIV, and here is the CSS, if relevant:

#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}

      

        
        
        
      

    

Should I get rid of the runat = server bit? If I do this and click on the display button, I still get this awful panel expanding to the very end of the page, but at least the silvery #mainarea DIV stays at the correct size (the panel just gets out of hand). If I go this route, any idea why is this breaking my drag? Hopefully I don't have to go this route and instead have something silly in my CSS that I'm missing ...

Thanks for your help! Bill