为什么div没有正确对齐，垂直？

Question

我想实现这个目标（link to full size image）：

我已经实现了这个目标（link to full size image）：

如果您注意到，左侧导航右侧的div不会显示在顶部，而是显示在底部。它应该开始显示在顶部导航下方。

这是HTML：

<div id="container">
    <div id="header">
        <div id="logo">
            <img src="images/parislane-ebay-listing-template2_02.png" alt="">
        </div>
        <div id="top-nav">
            <img src="images/parislane-ebay-listing-template2_05_01.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_02.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_03.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_04.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_05.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_06.png" alt="">
            <img src="images/parislane-ebay-listing-template2_05_07.png" alt="">
        </div>
    </div>
    <div id="content">
        <div id="left-nav">
            <div id="left-nav-head">STORE CATEGORIES</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
            <div class="left-nav-link">Category Name</div>
        </div>
        <div id="content-right">
            item title may go here item title may go here 
        </div>
    </div>
</div>

这是CSS：

img{ display:block; }
#container { background-color: #000; width: 100%; overflow:hidden; }
#header { width: 1010px; margin:0 auto 65px auto; }
#logo { width: 1010px; margin-bottom: 13px; }
#top-nav img { float:left; }
#content { width: 1010px; margin:0 auto; }
#left-nav { border: solid 1px #e56bae; width: 188px; }
#left-nav-head { background-image:url(images/parislane-ebay-listing-template2_15.png); height: 22px; padding-left:9px; vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#000; font-weight:bold; padding-top: 10px; }
.left-nav-link { background-color:#292929; border-bottom: solid 1px #4b4b4b; padding:9px 9px 7px 9px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; color:#fff; }
#content-right { width:805px; margin-left:15px; float:right; color:#fff; text-align:center; }

Answer 1

你需要让div向左浮动。

#nav-left, #content-right{
float:left;
}

请参阅小提琴：http://jsfiddle.net/3EJ6k/

块元素占据整行，即使连续2个具有理论上应该并排放置的宽度，除非浮动，否则它们不会这样做。