在#container之中，网站从上至下将内容分为了几个区域，分别放置特定的内容，从上至下形成了一个纵向布局的模式。
在纵向布局区域中，主要由以下几个部分构成：
#topBar位于最顶端，其中包含网站的搜索区与频道链接；
#header显示网站LOGO；
#betaNotice网站的一个信息提示区，显示一段小提示；
#primary主内容，这里将创建出复杂的页面布局；
#magic-1024这个区域用于显示右栏的内容；
#footer页脚区，显示了网站的一些功能链接。
这些div区域都放置在#container之中，之间形成了并列关系，而且在样式上基本不需要任何指定，按顺序从上至下叠放。
在这上下叠放的div之中，#primary与#magic-1024又形成了一个二列式布局，在CSS代码中，通过对#primary设定float:leftl;使得#magic=1024可以浮动到右侧显示从而形成了二列式布局。天津网站建设，天津网站优化，汽车玻璃，天津二手装载机，商业策划招商
主内容区的布局
主内容区#primary中出现了大量的分栏区域看似复杂，其实技术上非常简单，我们不妨继续看一下该区域的div分布。
在#primary之中，共放置了20个div区域，一般来说，我们会以为这样的布局是先在其中实现分二列，再在其中一列中再进行分列，如此类推，其实不然。UXMagazine网站充分利用了浮动定位的特性，我们所看见的20个div，全部属于并列关系。。之所以能够形成这样的布局是因为每一个div都有固定的宽度以及float:left;这样的定位方式。
这样，在#primary宽度一定的情况下，第一排的#featureImage与#adSponsor的宽度刚好等于#primary的宽度，后面的对象虽然也应该因为浮动的原因跟在adSponsor后面显示，但由于宽度已经被限制了，因此自动转到下一排显示。而第二排的#featrue、两个.listItem及一个#soundByte的宽度又刚好达到了#primary的宽度，因此后面的对象又将换行显示，以此类推。这样20个div方块就有序的从左向右排列，一旦超过#primary就换行，形成了一个类似棋盘的排列方式。这种做法也就是二列式布局的延伸，充分利用了浮动原理。而实现了这个进一步核心技术在于对宽度的合理控制，设计师在对这些div对象的宽度计算上非常精确，使得它们能够整齐的排列。
而以这个为基础，该页面上的其他部分的布局相信就更加简单了，如#magic-1024区域仅仅是由3个区域上下排列而成。不过细心的读者一定注意到了该网站中的#magic-1024的id名称，为什么会用这个名字呢？如果想知道原因不妨自己使用一下该网站，当我们尝试将IE浏览器窗口变窄时会发现，右边的内容也就是#margin-1024会消失，转而出现在页面的最下方，由于浏览器窗口大小的改变，将自动流动到下方，看来该网站虽然使用了大屏幕的设计，但是也考虑到了800x600分辨率的用户，而实现主要依靠JavaScript脚本，在页面中当JavaScript脚本发现浏览器窗口小于1024时，会调用另一套样式来替代现有的样式表，而这套新样式表则是专门针对800x600分辨率用户的，看来考虑得非常周全。