CSS布局终极方案之改进圣杯布局（兼容IE6+，现代浏览器）_html/css_WEB-ITnose

CSS兼容所有浏览器(IE6+，现代浏览器)的终极布局方案之 -- 改进版圣杯布局

改进思想：

通过对主内容区main增加一个额外包裹层div，将原来在父节点上的 padding-left|right 设置转移到包裹层上使用 margin-left|right 替代，达到更加灵活的布局设置。

原始圣杯布局实现：

同样的效果：

CSS 和 DOM 代码如下：

头部
		
		
			
				
主内容栏自适应宽度
			
		
		
			
侧边栏固定宽度
		
	
	
		
			
				
主内容栏自适应宽度
			
		
		
			
侧边栏固定宽度
		
	
	
		
			
				
主内容栏自适应宽度
			
		
		
			
侧边栏1固定宽度
		
		
			
侧边栏2固定宽度
		
	
	
		
			
				
主内容栏自适应宽度
			
		
		
			
侧边栏1固定宽度
		
		
			
侧边栏2固定宽度
		
	
	
		
			
				
主内容栏自适应宽度
			
		
		
			
侧边栏1固定宽度
		
		
			
侧边栏2固定宽度
		
	
		
底部