Positioning issue with min-width divs

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

 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://

<html xmlns="http://www.w3.org/1999/xhtml " >
<title>Test Page</title>
<!--[if IE]><style>
.PrefsPageOuter, .PrefsPageInner, .PrefTabOuter, .PrefTabInner {
height: 0;
he\ight: auto;
zoom: 1;
<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"
Quoted text here. Click to load it
Some content in this min-width column/div

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?


Site Timeline