Thanks a lot! Really helped me going in the right way. So far, I managed to get it all to work in Firefox. See http://20kmiles.dyndns.org/djtrx/
I'm developpig on a Mac now, so no chance to test anything in pc- browsers. And unfortunately it doesn't work yet in Safari. If there are any Safari-experts out there, could you please take a look? thanks! bartz On 29-jul-2006, at 11:24, David Sharp wrote: > Bart Zonneveld wrote: >> Our layout consists of 3 floating columns, left, center and >> right. The center column has a fixed width, let's say 400 pixels. >> The height of these two should be the same as the center column. > > I think most people's weapon of choice in this regard is faux > columns. http://www.alistapart.com/articles/fauxcolumns/ > I think this is appropriate for you because your middle column is > fixed width. Your graphic therefore should look something like this : > ******************| ( 400px of middle column background ) | > &&&&&&&&&&&&&&& >> The width, however (and this is the trickiest) should be the >> remaining width of the browser window, up until they've reached >> the width of the background-image. Something like (total width - >> center width) / 2. > > I think the trick is that your middle column is fixed, so you need > your left and right columns to be 50% of the available width, and > have margins equal to half that in which the middle column will > sit. Someone may have a more economical solution, and I'm not sure > how this works cross browser, but the following may help you get > started... (hopefully I'm not reinventing the wheel too much) > > <div id="left"> > <div>Left sidebar content goes in here</div> > </div> > > <div id="right"> > <div>Right sidebar content goes in here</div> > </div> > > <div id="middle"> > <div>Middle content goes in here</div> > </div> > > > And the CSS > body { > max-width : 800px; > position : relative; > margin : 0 auto; > padding : 0; > background : url(fauxcolumnsimage.gif) top center repeat-y; > } > #left { > position : absolute; > top : 0; > left : 0; > width : 50%; > } > #left div { > margin-right : 200px; /* that is half the width of the middle > column */ > } > #right { > position : absolute; > top : 0; > right : 0; > width : 50%; > } > #right div { > margin-left : 200px; > } > #middle { > width : 400px; > margin : 0 auto; > position : relative; /* otherwise the absolutely positioned divs > "paint over" the middle div */ > } > > Issues: > IE doesn't support max-width. There are workarounds, but these may > cause this method to stop working, I don't know. > IE < 6 don't support margin:auto. text-align : center; should work > but again I haven't tested this fix. > There are a lot of extra divs here - there may be a lot better way > of doing this, but this is what popped into my head first. ----------------------------------------- 07-07: MFF @ SJU http://www.movement-agency.nl/ http://guerata.blogspot.com/ Listen to my mixes @ http://20kmiles.dyndns.org/mix/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
