三列布局
http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/张鑫旭的博客
两列布局
<!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" xml:lang="zh-CN" lang="zh-CN"> <head> <style type="text/css"> #left { width:100px;height:100px;background-color:#ccc;border:2px solid #333; float:left; } #right {height:300px;margin-left:104px; border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat; } </style> </head> <body> <div id="left"> left </div> <div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div> </body> </html>
第二种
<!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> <style type="text/css"> #sidebar {width:100px;height:100px;float:left;background-color:#cccccc;border:2px solid #333333;} #Wrap {position:absolute;left:113px;right:0px;height:300px;border:2px solid #333333; background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;} #floatSpan {float:right;} /*for ie6*/ </style> </head> <body> <div id="sidebar"> left </div> <div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /> <span id="floatSpan"><span> </div> </body> </html>