建议你去看《HTML5布局之路》，里面从网站文件的创建开始，讲到网页整体布局的搭建，再到模块标签的选用与样式处理，最后是针对文本图片的样式处理。跟着学下来，就完全能够掌握网站布局了。
因为你把每个DIV都加了边框啊。比如说一个DIV得宽度是100
你在里面放了2个50宽度的DIV
然后设置了这个DIV的边框分别为1px
那么这里面的两个DIV宽度加起来就不是100了。
而已104px
这样自然就换行了
表格,框架和css+div相对比，div+css布局好，现在主流的网站均采用此种方法布局。1、div+css和表格相比较，其优点是其布局定位简单，表格布局需要使用文字做内容，当想修改部分内容就要改动整个表格甚至真个界面，不利于后期的维护和前期的开发。
2、div+css提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
3、div+css有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
