Question

I have three panels like so:

 ___    _________    ___
|   |  |         |  |   |
|   |  |         |  |   |
|   |  |         |  |   |
|   |  |         |  |   |
|___|  |_________|  |___|

But if I shorten the window a little bit, the middle panel goes below the two side panels:

 ___                ___
|   |              |   |
|   |              |   |
|   |              |   |
|   |              |   |
|___|              |___|
 _________ 
|         |
|         |
|         |
|         |
|_________|

Here is my code

<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 would I stop it from doing this?

EDIT: Here are the changes I made from responses.

<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%;">

Answer 1

You could try putting a wrapper around it with a min-width. There’s got to be a better way to handle this situation though. Can you show the complete layout? A link to a live page or a layout diagram?