I have a sample webform with 7 <DIV>. 6 <DIV> nested in one outer <DIV> as shown in the code snippet below. The problem is when I expand a PanelBar on the top row, it shifts the <DIV> area below it to the right instead of vertically downwards. This is illustrated in the figures attached. How can I overcome this problem?
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
div
>
<
div
style
=
" width:33%; float:left; background-color:Gray;"
id
=
"div1"
>
<
telerik:RadPanelBar
ID
=
"RadPanelBar1"
runat
=
"server"
Width
=
"100%"
>
<
Items
>
<
telerik:RadPanelItem
Text
=
"div1"
>
<
Items
>
<
telerik:RadPanelItem
Value
=
"div1"
>
<
ItemTemplate
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Button"
/>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
div
>
<
div
style
=
" width:33%; float:left; background-color:Green;"
id
=
"div2"
>
<
telerik:RadPanelBar
ID
=
"RadPanelBar2"
runat
=
"server"
Width
=
"100%"
>
<
Items
>
<
telerik:RadPanelItem
Text
=
"div2"
>
<
Items
>
<
telerik:RadPanelItem
Value
=
"div2"
>
<
ItemTemplate
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Button"
/>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
div
>
<
div
style
=
" width:33%; float:left; background-color:Navy;"
id
=
"div3"
>
<
telerik:RadPanelBar
ID
=
"RadPanelBar3"
runat
=
"server"
Width
=
"100%"
>
<
Items
>
<
telerik:RadPanelItem
Text
=
"div3"
>
<
Items
>
<
telerik:RadPanelItem
Value
=
"div3"
>
<
ItemTemplate
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Button"
/>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
></
div
>
<
div
style
=
" width:33%; float:left; background-color:Purple;"
id
=
"div4"
>
<
telerik:RadPanelBar
ID
=
"RadPanelBar4"
runat
=
"server"
Width
=
"100%"
>
<
Items
>
<
telerik:RadPanelItem
Text
=
"div4"
>
<
Items
>
<
telerik:RadPanelItem
Value
=
"div4"
>
<
ItemTemplate
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Button"
/>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
></
div
>
<
div
style
=
" width:33%; float:left; background-color:Teal;"
id
=
"div5"
></
div
>
<
div
style
=
" width:33%; float:left; background-color:Fuchsia;"
id
=
"div6"
></
div
>
</
div
>
</
form
>
</
body
>