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

网站如下：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：