Here's a (new?) variation on using negative margins to get a three-column layout - I've used the example HTML from A List Apart's article by Alan Pearce:
http://alistapart.com/articles/multicolumnlayouts for comparison's sake, but note the CSS layout method is quite different, using padding on an inner wrapper div within the center, rather than borders. (sidenote - I'm curious why Pearce's layout didn't make it into the Wiki at http://css-discuss.incutio.com/?page=CssLayouts ?) ----------------------------- Three questions: Do you see a problem with using this method as the basis for a fully fleshed-out three-column layout? Have you seen it used as such before, and if so, can you point to further examples or information on the technique? (side note, if not, I christen it the "Kapok" method since it uses padding <g>) and (especially if your answers to the above two are no) Can you point to "tried and true" three-column layout techniques robust enough for a CMS-driven site where users are contributing unpredictable content that may disrupt a fragile layout? ----------------------------- I've set the code up in three stages like a howto, so that newbies can easily see the logic behind it. Stage 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <title>3 columns, liquid center</title> <style type="text/css"> body{ margin:0; padding:0; } #container{ background-color:#0ff; float:left; width:100%; display:inline; /* So IE plays nice */ } #leftRail{ background-color:gray; float:left; width:150px; position:relative; height:300px; } #center{ background-color:yellow; float:left; width:100%; height:300px; } #rightRail{ background-color:green; float:right; width:200px; position:relative; height:300px; } </style> </head> <body> <div id="container"> <div id="center"> <div id="articles">Center Column Content</div> </div> <div id="leftRail">Left<br /> Rail</div> <div id="rightRail">Right Rail</div> </div> </body> </html> ----------------------------- Stage 2: add: #articles{ padding:0 200px 0 150px; } ----------------------------- Stage 3: add: margin-right:-100%; to the ruleset for the #center div ----------------------------- Here's my explanation for how the negative margin works, please let me know if I'm off base: By setting a negative margin equal to the width, the float rules act as if this div has no width at all, allowing the following floated boxes to overlap it. Thanks for your time and attention, and hope someone finds this helpful, or at least interesting. . . ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
