三行两列右列固定左列自适应宽度的CSS

xml version="1.0" encoding="UTF-8" ?>
DOCTYPE html 
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html  xmlns ="http://www.w3.org/1999/xhtml" >
  
< head >
 
< meta  http-equiv ="Content-Type"  content ="text/html; charset=GB2312"   />
 
< meta  http-equiv ="Content-Language"  content ="GB2312"   />
 
< meta  name ="author"  content ="DSclub,兀儿-干部"   />
 
< meta  name ="Copyright"  content ="任兀"   />
 
< meta  content ="代码"  name ="keywords"   />
    
< title > XHML1.0 DOC title >
 
< style  type ="text/css"  id ="internalStyle" >
body
{ margin :  0 ;  padding :  0 ; }
p
{ display : block ; font :  bold 12px serif ;  color :  #339 ; }
 #header
{ height :  64px ;  background :  #F00 ;  color :  #FFF ;  font :  bold 24px "Impact",serif ; line-height : 160% ;  text-indent :  36px ; }
 #maincontent
{ margin-top : 20px ; }
 #right
{ float :  right ;  width :  160px ;  background :  #DEF ; }
 #left
{ margin-right :  180px ;  background :  #CFC ;  color :  #999 ;   }
 #left h1
{ text-decoration :  underline ; font :  italic bold 16px serif ; }
 #footer
{ clear :  both ;  min-height :  80px ;  background :  #EEE ;  text-align :  center ;  font :  italic bold 20px "Impact",sans-serif ;  color :  #999 ; margin-top : 20px ; }
 
style >
  
head >
  
< body >
< div  id ="header" > Head Info div >

< div  id ="maincontent" >
  
< div  id ="right" >
 
< p > Right Info p >
 
< p > #right{ p >< p > float: right;  p >< p > margin: 20px;  p >< p > width: 160px;  p >< p > background: #DEF; p >< p > } p >
  
div >
    
< div  id ="left" >
     
< h1 > Style: h1 >
     
< p > #left{ p >
     
< p > margin-right: 180px; p >
     
< p > background: #CFC; p >
     
< p > color: #999; p >
     
< p > } p >
     
< h1 > Main Content! Main Content! Main Content! Main Content! Main Content! Main Content! Main Content!  h1 >
     
< h1 > Main Content! Main Content! Main Content! Main Content! Main Content! Main Content! h1 >
     
< h1 > Main Content! Main Content! Main Content! Main Content! Main Content!  h1 >
     
< h1 > Main Content! Main Content! Main Content! Main Content! h1 >
     
< h1 > Main Content! Main Content! Main Content! h1 >
     
< h1 > Main Content! Main Content! h1 >
     
< h1 > Main Content! h1 >
     
div >
  
div >
 
< div  id ="footer" > Powered By DSclub div >  
  
body >
html >
 

你可能感兴趣的:(网站制作技术,css,div,encoding,float,html,header)