親要素の幅を越えてメニューなどをブラウザ幅で表示

参考：http://css-eblog.com/csstechnique/overflow-menu.html

通常だと、コンテンツ幅800の場合なんかは

<div id="wrap">
  <div id="header"></div>
  <div id="content"></div>
</div>

#wrap {
  width: 800px;
  margin: 0px auto;
}

とする。だいたいはそうする。
ただ、デザイン的に、ヘッダーの一部だけはブラウザ幅いっぱいの表示したい、なんてこともある。
そういうときは、

<div id="header_wrap">
  <div id="header"></div>
</div>
<div id="menu"></div>
<div id="content_wrap">
  <div id="content"></div>
</div>

#header_wrap, #content_wrap {
  width: 800px;
  margin: 0px;
}
#menu {
  width: 100%;
}

とすることが多い。
とはいえ、この方法だと入れ子が増える。
簡単にするには、

<div id="wrap">
  <div id="header"></div>
  <div id="menu"></div>
  <div id="content"></div>
</div>

body {
  overflow-x: hidden;
  min-width: 800px;
}
#wrap {
  width: 800px auto;
}
#menu {
  margin: 0px -500%;
  padding: 0px 500%;
}