I want to good method to make css layout with any number of columns. I need less use of div
and css
with semantic coding. I need code for Fixed width, centered site and footer always should be at bottom.
I need compatibility with all mainstream browsers including IE 6 and 8. and it's possible to make without the use of CSS Hacks and IE conditional comments
I tried matheew james taylor's layout but it has some extra wrapper div.
Add and remove any column should be possible with minimum possible changes in css and xhtml.
Layout 1
Header
h o r i z o n t a l m e n u
Left Col Main Col Right Col
Footer
Layout 2
Header
h o r i z o n t a l m e n u
Left Col M a i n C o l u m n
Footer
Layout 3
Header
h o r i z o n t a l m e n u
Col 1 col 2 col 3 col 4
Footer
Although i know and tried many solutions on net but want to know some inputs of SO users.
I need a good method then i will use same in all projects. and I've tried many grid based frameworks and i don't want to use them. so don't suggest any Grid based CSS framework. can any online css layout generator make this. or if it's only possible by hand then give me a xhtml and css code snippets.
update:
this is base css for 3 col layout now what should be include.
#page_container{width:970px;margin:0 auto;}
#header{height:150px;background:#999;}
#left_column{width:180px;background:#CCC;}
#center_column{width:400px;background:#ECECEC;}
#right_column{width:180px;background:#CCC;}
#footer{height:150px;clear:both;background:#999;}