帮忙分析一下这个固定宽度侧边栏的方案

Question

网站如下：http://www.kura.kyoto-u.ac.jp/

感觉实现固定宽度侧边栏的方式并不难，但这个网站使用的结构让我迷惑，这样的写法有什么好处吗？
提取了一下他构建，html结构层次多，耦合紧密，css也过于复杂，只是以前似乎见过某种布局有先放置200%宽的父框加50%宽的子框的结构，但不记得运用的地方，这个网站的布局有名称吗？求教！

提取的css：

.box { width: 600px; margin: 0 auto; padding: 50px; overflow: hidden;}
.wrapper1 { width:100%; float:left; position:relative;}
.wrapper2 { width:200%; float:left; position:relative; left:200px;}
.wrapper3 {width: 50%; float:right; position:relative; right:200px;}
.main{height: 300px; margin-left: 200px; position:relative; right:100%; background-color: red;}
.side{height: 300px; width:200px; float:left; position:relative; right:200px; background-color:blue;}

提取的html：

<div class="box">
    <div class="wrapper1">
        <div class="wrapper2">
            <div class="wrapper3">
                <div class="main"></div>
            </div>
            <div class="side"></div>
        </div>
    </div>
</div>

Answer 1

lz 为什么觉得 别人已做好的 页面 就是优秀的呢？

布局就需要 html 结构 精简， 最好还有语意化，让人很容易看明白，找到对应的位置。。

这个网站， 我看了下布局， float 滥用，有些地方不需要float的，
侧边栏和主体的 结构也乱， 完全是靠 padding-top float 强行 拼凑起来的。。

建议你直接实现一个， 对比下结构， 很可能做的比这货好

Answer 2

关于什么学校研究室的网站就别看了，大多数都是乱写。

Answer 3

这个纯粹是因为使用了relative定位跟left，你弄清楚relative的相对父级元素时谁就不迷惑了。 这个结构感觉真是冗余。