example1: <!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=utf-8" /> <title>左边固定右边自动适应宽度</title> <style type="text/css"> body{ margin:0; padding:0;} #top{ width:100%; background-color:#090; height:100px} #con{ width:100%;} #left{ width:300px; float:left; height:400px; background-color:#F00} #right{ height:400px; background-color:#39F; margin-left:300px} #bot{ width:100%; background-color:#60C; clear:both; height:100px} </style> </head> <body> <div id="top"></div> <div id="con"> <div id="left">ddddddddddddddddddddddddddddddddd</div> <div id="right">ffffffffffffffffffffffffffff</div> </div> <div id="bot"></div> </body> </html> example2: <!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" /> <title>无标题文档</title> <style type="text/css"> <!-- * {margin: 0px;padding: 0px;} body {text-align: center; margin:0} #center #left {background-color: #FFFFCC;float: right;width: 200px;height: 300px;margin-left: -200px;} #center #right {background-color: #C8FFED;float: right;height: 300px;width: 100%;} #center {padding-left: 200px;} </style> </head> <body> <div id="center"> <div id="right">右边</div> <div id="left">左边</div> </div> </body> </html>