Hello all,
On the homepage of my website - www.mobiuspc.com, I have some distinct sections that I color coded so I could see how its all laid out. There is the master page section, which works just fine (its the tan bar with buttons like "Components" and such), and at that level and up everything works as best as I could wish for.
Down below I have some issues. There are 3 primary DIV's that I use to break down the page:
<div id="mainarea" runat="server" >
This is anything in between the header/master page area, and the yellow color coded area. This big area is supposed to be 700px high, and 1024px wide, and is colored silver. If you go to the site, you will see that it is not. There is a panel with a repeating hard drive image, that is my drop zone for Drag 'n drop functionality (unrelated to this question). I have it set to runat server, because if I don't do that, then Drag 'n Drop seems to break.
<div id="categorybar">
This is the yellow color coded area that holds all my buttons. I'm happy with it. Hit the button called "Display" and watch what happens to the DIV above it. It goes way out of bounds! My CSS to set its width and height seem to be overruled.
<div id="detailbox">
This is the blue colored area, no issues here. Eventually I will put controls in here, but for now it is fine being blue.
The initial thought might be that my CSS is borked. If this is the case, I can't see where! I've set the height/width and all that good stuff. I've tried added the float:left into random sections, to no effect. Here is the 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 run time when you click the "Display" button, and all those objects are added to a pane that resides in the #mainarea DIV. That pane is known as toolbox, and here are it's 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 when I add controls at runtime instead of simply having a scrollbar like I would prefer. The panel with all the hard drive pictures as the drop zone, that is also in the #mainarea DIV, and here is the CSS in case its relevant:
#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}
Should I get rid of the runat=server bit? If I do that and click on the display button, I still get that horrid panel expanding itself all the way to the bottom of the page, but at least the silver colored #mainarea DIV stays the proper size (the panel just gets out of control). If I go that route, any idea why it breaks my drag and drop? I hope I don't have to go that route, and instead there is simply something goofy in my CSS that I'm overlooking...
Thanks for your help! Bill