CSS Classic three-column layout

A Holy Grail layout

1 HTML structure

<! DOCTYPE html>
2 CSS
*{padding:0;margin:0;list-style:none;} body{min-height:700px;}. Header,.footer{background: #ff9999; text-align:center;height:50px;line-height:50px;}. Left,.middle,.right{position:relative;float:left;min-height:530px;line-height:530px;text-align:center;}. container{padding:0 220px 0 200px;overflow:hidden;}. Left{margin-left: -100%;left: -200px;width:200px;background-color: #99ffff;}. Right{margin-left: -220px;right: -220px;width:220px;background: #ccff99;}. Middle{width:100%;background: #ccffff; word-break:break-all;}. Footer{clear:both;}
　
Two-wing flight layout
1 HTML structure
<! DOCTYPE html>
2 CSS
*{padding:0px;margin:0px;}. Header,.footer{height:50px;line-height:50px;background: #cf9999;    border:1px solid #333;    Text-align:center;}. Left,.middle,.right{float:left;min-height:500px;line-height:500px;text-align:center;}. Left{margin-left: -100%;width:200px;background: #9999ff;}. Right{margin-left: -220px;width:220px;background: #ccffff;}. middle{width:100%;}. Middle-inner{margin-left:200px;margin-right:220px;min-height:500px;background-color: #ccff99; Word-break: Break-all;}. Footer{clear:both;}
　　
Three or more of the classic layout of the two wings for the best, on the basis of a variety of variants, mainly reflects the floating and margin of the clever use of negative
CSS Classic three-column layout