div side by side and float left

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>

My 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;
}

What I get:

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

But what I want:

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

What do I do wrong?

Answer 1

add display:inline to #show_pics

jsfiddle

Answer 2

You can try floating your navigation to the left and then just add a padding to your content div. Should suffice as a dirty solution for your problem.

.left-nav {
    float:left;
    width:90px;
    background:darkgray;
}
.main-content {
    padding-left:100px;
}

JSFIDDLE http://jsfiddle.net/QWhSn/

Answer 3

You're better off putting floated element inside the same parent as the content that is supposed to wrap around it. So remove the div around the pics.

I knocked this up so you could see http://jsfiddle.net/FE3Wj/

Answer 4

That's only my solution:

Give #content_living a width. Than add a float: right; command to the #show_pics id and delete the float: left command from #left_nav . With the width in the #content_living you can control the space between the two div's inside. Hope it works.