How do I keep a panel from being forced under two other panels when the window is made smaller?
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"> </div>
<div class="bigOlePanel"> </div>
<div class="littlePanels"> </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.
加载中,请稍侯......
精彩评论