html - div并排并向左浮动

Question

eftMy html:

<div id="content_living" >
    <div id="leftnav">
    //only text href
    </div> 
    <div id="show_pics">
    //pics: 1, 2, 3 4, - all href with img
    </div> 
</div>

我的 CSS:

#content_living {

}

#leftnav{
float:left;
width:200px;
padding-left: 20px;
padding-top: 30px;
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);  
}

#show_pics {
padding-top:15px;
padding-bottom: 20px;
overflow: hidden;
padding-left: 10px;
width: auto;
}

我得到的:

href1  | pic1 pic2 pic3
href2  | pic4 pic5 pic6
       | pic7 pic8 pic9
       | pic10 pic11 pic12

但我想要的是:

href1  | pic1 pic2 pic3
href2  | pic4 pic5 pic6
| pic7 pic8 pic9 pic10
| pic11 pic12 ...

我做错了什么？

Answer 1

将display:inline 添加到#show_pics

jsfiddle