开发者

What is the best strategies to make css layout with any number of columns?

开发者 https://www.devze.com 2022-12-19 11:51 出处:网络
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 bott

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消