> -----Original Message----- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > discuss.org] On Behalf Of Austin, Darrel > Sent: Tuesday, April 01, 2008 9:33 AM > To: CSS Discussion > Subject: [css-d] 3 column layout. Am I missing the obvoius? (question and > commentary) > > Over the past year or so, my HTML + CSS work has been mostly producing > layouts for other visual designers. CSS has been great and it's been > fairly easy to layout the pages from scratch. Most of these were > 2-column layouts where we had control over the content. > > I'm now wanting to build a 3-column fluid layout for our CMS. The main > issue is IE6 (still got to support that one) and the fact that we have > little to no control over the content, so column lengths can be > anything. > > So, I started grabbing some sample templates online like the Holy Grail > ones, some from Glish, etc. > > Invariably, I'd start looking at the CSS and HTML and begin to get > frustrated with the amount of hacks and non-semantic wrappers that are > still being used in all of these. One was a combination of 4 nested > wrappers, negative margins, and offset positioning. To change the width > of one column, you'd have to change margin attributes here, width > attributes there, and then do some math to figure out the wrapper > offsets. Kind of ridiculous, I thought. > > I figured I'd start from scratch and quickly came up with a layout like > this: > > HTML: > > <columnwrapper> > <left> </left> > <right> </right> > <center> </center> > </ columnwrapper> > > CSS: > > Left { float: left, width: 200px;} > Right { float: right, width: 200px;} > Center {margin: 0px 220px;} > columnwrapper {width: 100%; overflow: auto} /* the one 'hack' to get it > to clear floats */
Hi Darrel, This approach used to be very common, but now most authors don't want to have their content come last. -- Regards, Thierry | http://www.TJKDesign.com ______________________________________________________________________ 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/
