...

View Full Version : Nested fluid / fixed layout - problem in IE5.x



oslofish
12-01-2006, 01:42 PM
Good morning (or afternoon...or evening!)

I am trying to achieve the following 2 column layout:

Fixed right column (170px)
Fluid left column (%-based, fills the rest of the browser window) -
needs to contain 2 columns: 1 fixed left (375px + 10px right margin) , 1 fluid right (filling remaining of the container)

I have come up with the following code:


html,body {margin:0; padding:0}
body { font:76% arial,sans-serif}

#main { float:left;width:100%;margin-left:-180px}
#content { margin-left:180px}
#banner_column { float:right; width:180px; background:#B9CAFF}

#inner_wrap {float:right;width:100%; margin-left:-385px}
#inner_right {margin-left:385px}
#inner_left {float:left; width:375px; background:#33CC66}




<div id="container">
<div id="main">
<div id="content">
<h1>Intro</h1>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt cupidatat non proident. Excepteur sint occaecat ut labore et dolore magna aliqua.</p>
<div id="inner_wrap">
<div id="inner_right">
<h2>Inner right column</h2>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt cupidatat non proident. Excepteur sint occaecat ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="inner_left">
<h2>Inner left column</h2>
<p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat ut labore et dolore magna aliqua. Eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt cupidatat non proident. Excepteur sint occaecat ut labore et dolore magna aliqua.</p>
</div>
<br clear="all">
</div>
</div>
<div id="banner_column">
<p><strong>banner_column here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
</div>
</div>


This code seems to work in FF, Opera and IE6, but I also need it to work in IE5.x and IE5 Mac (per client request).

I understand percentage-based layouts can be quite buggy, but I don't know that there is any other way to do this layout.

Is there any way I can make the above work in IE5 (PC + Mac)?

Thanks.

Excavator
12-03-2006, 08:01 AM
Hello oslofish,
I sure hope I understood your question...it seems like I did a page like your describing a while back. I dug it out and resized the columns and came up with this. (http://www.nopeople.com/oslofish/)

Did the code you've been working on validate?? I forgot to check. I also don't have IE5 or a Mac to check anything with.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum