css - 3列の幅

Question

私は問題の解決策を考え出すためにしばらく座っていました。3列（左、中央、右）で構成されたウェブサイトを作りたいです。これら3つは一緒に画面幅全体をカバーします。1つの列は固定ピクセル値で構成され、他の2つの列は、中央の列が画面の中央に配置されるのと同じ幅である必要があります。

左右の列が必要なのは、背後にあるものを隠してから、中央の列にアニメーション化するためです。

誰かが解決策を持っていますか？

Answer 1

私は幅に満足していません：これに10000％ビット、誰かがよりクリーンな解決策を思い付くことができるかもしれませんが、これはあなたが説明していることをするだろうと思います。これらの種類のレイアウトは、純粋なCSSソリューションを探している場合は少し注意が必要です。

HTML：

<div id="content">
<p>Content goes in here</p>
<ul>
    <li>Whatever</li>
    <li>Kind</li>
    <li>Of</li>
    <li>Content</li>
</ul>        
<div class="sideCol" id="left"></div>
<div class="sideCol" id="right"></div>

</ p>

CSS：

#content
{
    width: 200px;
    margin: 0 auto;
    position: relative;
}

.sideCol
{
    width: 10000%;
    height: 100%;
    position: absolute;
}

#left
{
    background-color: red;
    right: 200px;
    top: 0;
}

#right
{
    background-color: blue;
    top: 0;
    left: 200px;
}​

http://jsfiddle.net/fLH9T/

Answer 2

HTML

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

CSS

.left { float:left; width:33%; height:200px; z-index:100; diplay:block; }
.center { float:left; width:33%; height:200px; z-index:1; diplay:block; }
.right { float:right; width:33%; height:200px; z-index:100; diplay:block; }

私はこれがあなたが望むものだと思います。