What is the best strategies to make css layout with any number of columns?
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 开发者_Python百科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;}
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.
精彩评论