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/
