CSS问题 - 我的DIV保持折叠！

Question

在我的网站 - www.mobiuspc.com的主页上，我有一些不同的部分，我用颜色编码，这样我就可以看到它的全部布局。有主页面部分，它工作得很好（它的棕褐色栏像“组件”等按钮），并在该级别和一切工作尽我所能的最好。

下面我有一些问题。有3个主要DIV的，我用它来打破页：

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

这是什么，在头/母版页区域之间，和黄颜色编码区。这个大面积应该是700px高，1024px宽，并且是有色的银色。如果你去的网站，你会发现它不是。有一个重复硬盘驱动器映像的面板，这是我的Drop'n drop功能拖放区（与此问题无关）。我将它设置为runat服务器，因为如果我不这样做，那么Drag'n Drop似乎会中断。

<div id="categorybar"> 

这是保存我所有按钮的黄色区域。我很高兴。点击名为“显示器”的按钮并观察它上面的DIV会发生什么。它走出界限！我的CSS设置其宽度和高度似乎被推翻。

<div id="detailbox"> 

这是蓝色的颜色区域，这里没有问题。最终，我会把控制权放在这里，但现在它很好地变成蓝色。

最初的想法可能是我的CSS是borked。如果是这样的话，我看不到哪里！我已经设置了高度/宽度和所有好东西。我尝试添加浮动：左侧随机部分，没有任何效果。这里是我的CSS文件”

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

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

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

我在运行时创建的对象，当你点击‘显示’按钮，所有这些对象被添加到驻留在#mainarea DIV窗格相关摘录。这窗格被称为工具箱，这里是它的CSS属性：

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

出于某种原因，它不断扩大，超出其预定尺寸时，我在运行时添加控件，而不是仅仅有一个滚动条像我宁愿用面板所有的硬盘图片作为拖放区，也在#mainarea DIV中，这里是相关的CSS：

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

我应该摆脱runat =服务器位？如果我这样做，然后单击显示按钮，我仍然会将可怕的面板一直扩展到页面的底部，但至少银色的#mainarea DIV保持适当的大小（面板刚刚失控）。如果我走这条路线，有什么想法为什么会打破我的拖拽？我希望我不必走这条路线，而只是在我的CSS中有一些愚蠢的东西，我忽略了...

感谢您的帮助！ Bill

Answer 1

runat =“server”将更改您使用它的控件的客户端ID，这意味着您的#mainarea css将不适用。

你可以通过分配mainarea一个css类并使用它来应用样式而不是它的id来解决这个问题。