Alright, so i posted this in the design help forum, but i need to get this figured out snappy like, so if someone can mock me up a quick example of how to do this, i'd be willing to throw them over a couple of bucks. if you know how to do it properly i'm sure it should only take a couple minutes. drop me a pm if you know how to do the following... Alright, I'm trying to work on a design in which the middle column has a fixed width and remains centered, while the columns to either side of that width stretch to fill the remaining width on the browser. Does anyone know how to do this? I can do it easily enough on a 2 column design, but everything I try to setup fails to work for me. the right side column always winds up floating down below the other two. Any ideas, I'm getting really frustrated with this here.
Try This <body> <div id="outer_wrapper"> <div id="wrapper"> <div id="header"> <h2>Header</h2> <p>...</p> </div><!-- /header --> <div id="container"> <div id="left"> <h1>Left</h1> <ol> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ol> </div><!-- /left --> <div id="main"> <h1>Main</h1> <p>...</p> </div><!-- /main --> <!-- This is for NN6 --> <div class="clearing"> </div> </div><!-- /container --> <div id="sidebar"> <h1>Sidebar</h1> <p>...</p> </div><!-- /sidebar --> <!-- This is for NN4 --> <div class="clearing"> </div> <div id="footer"> <h2>Footer</h2> <p>...</p> </div><!-- /footer --> </div><!-- /wrapper --> </div><!-- /outer_wrapper --> </body> Code (markup): #outer_wrapper { /* because "min-width" is not supported by IE, these pages use a script from PVII */ min-width:740px; /* this is to "minimize" an IE bug related to background painting, but because it creates a gap below the footer, the same declaration is also added to #footer */ width:100%; /* faux-column technique, this is the left one */ background:#fff url(left.gif) repeat-y left } #wrapper { /* faux-column technique, this is the right one */ background:url(right.gif) repeat-y right } #header { border:1px solid #b0b0b0; background:#b0b0b0; /* this is to "give layout" to the element and fix some peek-a-boo bug in IE (v6 sp2) */ width:100%; /* the above declaration creates an horizontal scroll bar in IE, this is to get rid of it */ margin:0 -1px } #container { float:left; width:100%; /* IE doubles the margins on floats, this takes care of the problem */ display:inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */ margin-left:-200px } #left { float:left; width:150px; /* IE doubles the margins on floats, this takes care of the problem */ display:inline; margin-left:200px } #main { /* the width from #left (150px) + the negative margin from #container (200px) */ margin-left:350px } /* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */ #sidebar { /* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */ padding-left:100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */ margin-left:-200px } #sidebar p { /* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */ position:relative } #footer { /* see #outer_wrapper */ width:100%; /* this is to clear #container */ clear:both; border-top:1px solid #b0b0b0; border-bottom:1px solid #b0b0b0; background:#b0b0b0} /* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */ .clearing {height:0;clear:both} Code (markup):