和前一篇文章一样，只是这次调换了个位置。把之前的左栏固定变为了现在的右栏固定，实现的手法也是大同小异，不过有一个地方需要注意。
那就是在写HTML时，应该把右边的先写，然后再写左边。因为DIV的默认样式是block，每个div都会自动断行。如果先写左边，再写右边的话，因为左边没有float漂浮，右边的会在右部断行；所以编写时，先写右边，再写左边，右边是float的。
［演示地址：http://www.doyoe.com/model/xhtmlcss/layout/2.htm］
CSS部分：
body { font-family: Verdana, Arial; margin: 0; font-size: 12px;}#dyhead { margin-bottom: 5px;}#dyleft { margin-right: 210px;}#dyright { float: right; width: 200px;}#dyfoot { margin-top: 5px; clear: both;}div { color: #363636; background-color: #eee; border: 1px dashed #630;}
和前一篇文章一样没有什么大的不同，只是#dyleft和#dyright互换了一下，#dyright里面的float值为right，漂浮在右边。
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="Author" content="飘零雾雨|edzmaster@gmail.com" /><title>Css Layout</title></head><body><div id="dyhead">头部</div><div id="dyright">右栏固定<br />宽度为200px</div><div id="dyleft">左栏宽度自适应</div><div id="dyfoot">底部</div></body></html>
这个布局基本和左栏宽度固定右栏宽度自适应一样，只是从上面可以看出，#dyright写在了#dyleft前面，这里只要注意这一点就可以了^_^祝大家好运。
原文地址：http://blog.doyoe.com/article.asp?id=10
