How do I keep a panel from being forced under two other panels when the window is made smaller?_问答_开发者

How do I keep a panel from being forced under two other panels when the window is made smaller?

开发者 https://www.devze.com 2022-12-15 17:01 出处：网络

I have three panels like so: _______________ 开发者_运维技巧 | |___||_________||___|

相关专题：asp.net css

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

Here's what I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Three Little Panels, All in a Row</title>
<style>
#container
{
min-width:800px;
overflow:auto;
}
.littlePanels
{
float:left;
width:100px;
background-color:#999900;
}
.bigOlePanel
{
float:left;
width:600px;
background-color:#CC9966
}
</style>
</head>

<body>
<div id="container">
<div class="littlePanels">&nbsp;</div>
<div class="bigOlePanel">&nbsp;</div>
<div class="littlePanels">&nbsp;</div>
</div>
</body>
</html>

Hope this works!

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?

It seems that middle panel was squeezed. To be sure add wrapping div with explicit width (say 1000), and all another assign also explicit width. Take in mind you have 2px border - so subtract 4 total from each one.

And at last - instead of 'inline' of middle div, review possibility to assign it 'float=left' also.