letsgetsilly
07-25-2006, 10:24 AM
I've been developing (or trying to) my first website in a 3-column + header + footer 100% equal-height CSS-only for the past few months because everyone says tables are a thing of the past.
I still have been unable to come up with a clean 3 column layout that fits all of my needs (header, footer, stretches to 100% no matter what, and works in IE and FF)
If anyone has a solid template on how to get all of this accomplished, please let me know. In the meantime, here is a collection of guides that I found helpful in my design adventures, many of which were found through the CSS references sticky in this forum:
-This code worked the best but it is dirty. there are several layers of div containers. I get confused when I try to use this code and break it into external style sheets and add content. I did not use this
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
-This is the code I ended up going with. Uses a crazy padding hack to make pages display correctly, but then pages will not print. Also does not stretch to 100%. I can't figure out why.
http://positioniseverything.net/articles/onetruelayout/
-Doesn't have equal height columns ListApart's 3 column
http://www.alistapart.com/articles/holygrail
Several sample templates
http://www.brunildo.org/test/#pop
Quirksmode.org more CSS tricks
http://www.quirksmode.org/
Please add to my list if you have good links. And please oh please--does anyone have that 3 column 100% equal-height +footer +header template?
I still have been unable to come up with a clean 3 column layout that fits all of my needs (header, footer, stretches to 100% no matter what, and works in IE and FF)
If anyone has a solid template on how to get all of this accomplished, please let me know. In the meantime, here is a collection of guides that I found helpful in my design adventures, many of which were found through the CSS references sticky in this forum:
-This code worked the best but it is dirty. there are several layers of div containers. I get confused when I try to use this code and break it into external style sheets and add content. I did not use this
http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
-This is the code I ended up going with. Uses a crazy padding hack to make pages display correctly, but then pages will not print. Also does not stretch to 100%. I can't figure out why.
http://positioniseverything.net/articles/onetruelayout/
-Doesn't have equal height columns ListApart's 3 column
http://www.alistapart.com/articles/holygrail
Several sample templates
http://www.brunildo.org/test/#pop
Quirksmode.org more CSS tricks
http://www.quirksmode.org/
Please add to my list if you have good links. And please oh please--does anyone have that 3 column 100% equal-height +footer +header template?