<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "> <HTMLxmlns= "http://www.w3.org/1999/xhtml"> <Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Div+css realizes fixed width on both sides, middle adaptive width-day Charm Design Blog</title> <style>Body{margin:0;padding:10px;}#head{Margin-bottom:10px;Height:50px;Background-color:#999999}#main{}#left{width:200px;float: Left;Margin-right:-200px;Background-color:#FF9900}#mid{width:Auto;background:#00FF00;margin:0 220px;Border:1px solid #000;}#right{width:200px;Margin-left:-200px;float: Right;Background-color:#CCCC00}#foot{Margin-top:10px;Clear:both;Height:50px;Background-color:#CCCCCC} </style> </Head> <Body> <DivID= "Head">I'm the head.</Div> <DivID= "Main"> <DivID= "Left">I'm left, Width: 200px</Div> <DivID= "Right">I'm right, Width: 200px</Div> <DivID= "Mid">I am the middle, wide adaptive</Div> </Div> <DivID= "Foot">I am the bottom</Div> </Body> </HTML>
CSS Self-adapting