Unexpected placement of unordered list displayed with inline-block - css

Question

I have a grid of pictures that displays fine by themselves, but I cannot place this grid next to a sidebar.
To build the grid, I place the pictures in an <ul>, and set the property for <li> display: inline-block.
When trying to incorporate this grid next to a sidebar div, it is not placed to the sidebar's side; instead, it goes under the sidebar. Placing text does what I want. Now, when I omit display and float on the <li>, the pictures show up in the right place (next to the sidebar), but I want the pictures displayed in a grid, not a single column.
JSFIDDLE LIVE DEMO
Here's my CSS
ul.cats li {
width: 200px;
display: inline-block;
/* will not display to the right of sidebar */
/* float: left; */
/* no good either */
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
border: 1px solid black;
}
.site_body_container {
position: relative;
width: 100%;
height: 100%;
background-color: #ffffff;
}
.site_sidebar {
position: relative;
float: left;
height: 95%;
color: white;
}
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
}
and HTML
<div class="site_body_container">
<div class="site_sidebar">
<ul>
<li>Sidebar 1</li>
... etc ...
</ul>
</div>
<div class="site_content">cats
<div class="container">
<div id="links">
<ul class="cats">
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
</li>
<li> <img src="http://placekitten.com/50/30" /><br>Kitty
... etc ...
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

You need to explicitly set the width of the container holding the pictures, something like:
.site_content {
position: relative;
float: left;
padding: 10px;
border: 5px solid blue;
height: 100%;
width: 450px;
}
Otherwise, it will take up the whole width, which causes it to break onto the next line, underneath the left sidebar.
Here's a fiddle: http://jsfiddle.net/9Wg3T/8/

Answer 2

After a bit more searching I found an alternate solution which is what I am currently using.
I can make the sidebar's width variable (determined by the size of its contents) and the "cats" gallery take up the remaining width to the sidebar's right:
.site_sidebar {
position: relative;
float: left;
height: 95%;
background-color: #eeffff;
padding: 0;
}
.site_content {
position: relative;
padding: 0;
overflow: hidden;
}
The trick is setting .site_content's overflow to hidden. Explanation in this answer.