2 column liquid layout - left min-width
Hi guys,
I am having some serious issues with this layout. I cant seem to get it to work properly in IE. I have it working in FF and Mozilla.
My basic template looks like this:
HTML Code:
<body>
<div id="body">
<div id="section-right">...</div>
<div id="section-left">
<div id="section-top-wrapper">
<div id="section-top">...</div>
</div>
<div id="pathway">...</div>
<div id="section-maincontent">...</div>
</div>
<div id='footer'>...</div>
</div>
</body>
It is 2 columns, with the right column fixed width, and the left column liquid, acheived by floating "section-right" right, and applying a right-margin to "section-left".
I want "section-left" to have a min-width, but cant get it to work properly in IE. Basically I am applying a padding to the body tag of the desired min-width and then applying a negative margin of equal size to the #body div to move all the content back onto screen. But in IE "section-left" fills the entire padding, pushing the right column off the screen.
Here is the relevant css:
Code:
body {
margin: 0;
margin: auto;
padding: 0;
padding-left: 994px;
}
#body { margin-left: -994px; }
#section-right {
margin-right: 33px;
width: 220px;
float: right;
z-index: 2;
overflow: hidden;
}
#section-left {
width: auto;
margin-right: 253px;
}
Sorry, I dont have an available url to view it at.
Thanks in advance for any help
