css - 水平レイアウトの問題 - div が重なっている

Question

水平レイアウトに問題があります: http://jsfiddle.net/GqH6s/4/

親の #content div は、すべての子の合計ではなく、最初の子 (#projects) から幅を取得しているようです。

jQuery で回避できることはわかっていますが、可能であれば CSS を使用したいと考えています。

ご協力いただきありがとうございます！

基本的なhtml:

<div id="content">
    <div id="projects" class="section">
        <div class="block">Content</div>
    </div>
    <div id="profile" class="section">
        <div class="block">Content</div>
    </div>
    <div id="team" class="section">
        <div class="block">Content</div>
    </div>
</div>

そしてCSS：

    #content {
        white-space: nowrap;
        display: inline-block;
    }
    .section {
        display: inline-block;
    }
    .block {
        white-space: normal;
    }

Answer 1

#profile および #team div を #project div 内に配置して、残りのセクションとインラインで表示されるようにする必要があります。

次のようになります。