|
Posted by paul.gibson on January 30, 2008, 2:53 pm
Please log in for more thread options
Hi -
For IE, I'm using some nested <div>s to create a layout that has a
fixed width area on the left of the display and a minimum width area
to its right. Stripped down, it looks like this:
<!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>
<title>Test Page</title>
<!--[if IE]><style>
.PrefsPageOuter, .PrefsPageInner, .PrefTabOuter, .PrefTabInner {
height: 0;
he\ight: auto;
zoom: 1;
}
</style><![endif]-->
</head>
<body>
<form id="form1">
<div class="PrefsPageOuter" style="border-left: 594px solid
#f5f5f5"><div class="PrefsPageInner" style="margin-left:
-594px;position: relative">
Some content in this fixed width column/div
<div class="PrefTabOuter" style="border-left: 400px solid #f5f5f5"
><div class="PrefTabInner" style="margin-left: -400px;position:
relative"
Some content in this min-width column/div
</div></div>
</div></div>
</form>
</body>
</html>
I've been getting everything in the min-width column to flow nicely so
the side-by-side display of the fixed width content and the min-width
content are retained. However, when the min-width column contains a
table that is wider than the minimum width (400px), the content moves
below the fixed width content. I would like it to remain displayed
side-by-side. Besides the obvious (and for me undesirable) solution of
increasing the min width, can anyone offer a suggestion?
TIA
|