These are my three panels:
___ _________ ___
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|___| |_________| |___|
When I resize the window slightly, the layout changes:
___ ___
| | | |
| | | |
| | | |
| | | |
|___| |___|
_________
| |
| |
| |
| |
|_________|
Here is the code snippet:
<style>
.SidePanel {
background-color:#9999CC;
width:100px;
height:597px;
}
</style>
<div style="text-align:center;">
<div style="float:left">
<asp:Panel ID="Panel4" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
</div>
<div style="float:right">
<asp:Panel ID="Panel5" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
</div>
<div style="display:inline;">
<asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px" Width="900">
...content...
</asp:Panel>
</div>
</div>
How do I prevent this layout change?
Revised code based on feedback:
<style>
.SidePanel {
background-color:#9999CC;
height:597px;
}
</style>
<div style="text-align:center; min-width:1024px; width:100%;">
<div style="float:left; width:10%">
<asp:Panel ID="Panel4" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
</div>
<div style="float:right; width:10%">
<asp:Panel ID="Panel5" runat="server" CssClass="SidePanel" BorderColor="DarkBlue" BorderWidth="2px"/>
</div>
<div style="width:70%">
<asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px" style="width:100%;">