Connecting Tech Pros Worldwide Forums | Help | Site Map

The perfect CSS layout

Newbie
 
Join Date: Jul 2006
Posts: 9
#1: Jul 25 '06
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.positioniseverything.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://positioniseverything.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.org/test/#pop[/L]

[L=Quirksmode.org 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?

Closed Thread