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:
-This code works 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
[L=CSS Page Maker (css generator)]http://www.positionise verything.net/articles/pie-maker/pagemaker_form. php[/L]
-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.
[L=One True Layout]http://positionisevery thing.net/articles/onetruelayout/[/L]
-Doesn't have equal height columns
[L=ListApart's 3 column layout.]http://www.alistapart. com/articles/holygrail[/L]
[L=Several sample templates]http://www.brunildo.or g/test/#pop[/L]
[L=Quirksmode.or g more CSS tricks]http://www.quirksmode. org/[/L]
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:
-This code works 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
[L=CSS Page Maker (css generator)]http://www.positionise verything.net/articles/pie-maker/pagemaker_form. php[/L]
-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.
[L=One True Layout]http://positionisevery thing.net/articles/onetruelayout/[/L]
-Doesn't have equal height columns
[L=ListApart's 3 column layout.]http://www.alistapart. com/articles/holygrail[/L]
[L=Several sample templates]http://www.brunildo.or g/test/#pop[/L]
[L=Quirksmode.or g more CSS tricks]http://www.quirksmode. org/[/L]
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?