ansaurus

Question

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

Answer 1

+1 A:

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?

mark123 2010-01-08 15:19:45

Also, what is the point of the "display: inline;" in the content <div>?

mark123 2010-01-08 15:34:37

@Mark, left over from when I was trying to get the layout to work. The wrapper with min width worked, but there isn't a live page because the site is only on the company intranet. One thing that happens now though, is when the content is squeezed, the middle panel grows larger and the others don't. Is there a way to make the side panels grow with the middle panel?

Justen 2010-01-08 15:39:26

Can you show me the changes you made?

mark123 2010-01-08 15:43:41

Up at the bottom of the original post

Justen 2010-01-08 15:48:59

Are you testing it IE? I believe IE <7 treats min-width as a fixed width.

mark123 2010-01-08 15:51:28

IE8 because thats all our users will be using.

Justen 2010-01-08 15:57:17

No worries then. (IE6 is the one to worry about in that case). Can you show the doctype you are using? If it's not there or incomplete it will trigger quirks mode and cause issues with the layout.

mark123 2010-01-08 16:00:42

To center the div I'd surely leave out the display:inline; and use margin:auto; instead.

mark123 2010-01-08 16:03:08

I don't have the display inline anymore. And here is my doctype:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Justen 2010-01-08 16:04:48

Add the margin: auto; to center the content div then: <div style="width: 70%; margin: auto;">

mark123 2010-01-08 16:07:31

Make sure to test the layout and see if you can break it by adding/subtracting content, increasing text size (if it survives 3 I'm usually happy) and anything else you can think to throw at it.

mark123 2010-01-08 16:10:48

Answer 2

+1 A:

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.

Dewfy 2010-01-08 15:32:59

Then it isn't centered. But I removed the display:inline, and it works the same way

Justen 2010-01-08 15:38:28

@Justen, display:inline doesn't cause "squeezing" middle div down - the problem is (a) unmatched width (b) questionable flowing of blocks. My recommendation about flow - just make your code more clear.

Dewfy 2010-01-08 17:02:28

Answer 3

+1 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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!

tahdhaze09 2010-01-08 16:23:57

ansaurus

tags:

views:

answers:

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

related questions