tags:

views:

84

answers:

1

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;}
+2  A: 

I realize you said don't suggest Grid based CSS frameworks, but that's almost exactly what you're trying to achieve. If the existing frameworks don't work for you, maybe you should pop open their source code and take a look at how they achieve the effect - and then adapt it for your own needs.

Austin Fitzpatrick
Yup. [960.gs](960.gs) is a nice one. At the very least, look at its source code and try to understand what it’s doing.
Paul D. Waite
@Paul - a personal favorite of mine.
Austin Fitzpatrick