Hi Darrel,
Fundamentally speaking, you're right on the money. The problem exists in
coloring and backgrounding. In your example, full length columns won't
render...that is, the color of 'left' may not match the length of the
background on 'right'.
In an ideal world, one might do this:
HTML:
<div class="shell">
<div class="frame">
<div class="menupanel"></div>
<div class="mainpanel"></div>
<div class="morepanel"></div>
</div>
</div>
CSS:
div.shell{display:table;}
div.frame{display:table-row;}/* for Safari */
div.menupanel{display:table-cell;width:20%;}
div.mainpanel{display:table-cell;width:60%;}
div.morepanel{display:table-cell;width:20%;}
In which case, you'd have the nearly perfect CSS-only, hackless,
table-emulating, three column, fairly semantic setup. But we don't live
in the ideal world so support for table-cell displaying is sketchy.
The problems start to arise when you want source ordering and other such
oddball, fringe things. I use my own layout which requires the four
(scorned) nested divs and negative margins. I don't have to do math
though, so it works out ok for me and can be over-ridden in the theme
style sheet for the project. Since I separate style sheets out into
their primary functions, this grants me a bit of flexibility for these
kinds of things. Perhaps ridiculous, but it works for me.
Austin, Darrel wrote:
> 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 */
>
> This seems to work just fine in IE6+ up.
>
> My question is: Am I missing something obvious? Is there something wrong
> with the above example? Why are most of the 3-column layouts out there
> so heavily relying on CSS hacks and nested wrappers? Is it a workaround
> for alternative source ordering? Is it remnants of IE < 6 support? A If
> so, that makes sense...which leads to the next question...are there any
> preferred pre-made CSS layouts that are more IE6+ centric?
>
> -Darrel
> ______________________________________________________________________
> 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/
______________________________________________________________________
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/
