Unexpected placement of unordered list displayed with inline-block

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> <a href="#" title="kitty"><img src="http://placekitten.com/50/30" /><br>Kitty</a>

                    </li>
                    <li> <a href="#" title="kitty"><img src="http://placekitten.com/50/30" /><br>Kitty</a>
                      ... etc ...
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Your width in the `ul.cats li` is throwing it off. If you make it auto then it will work just fine. — BuddhistBeast, Jul 08 '14 at 01:45
Is this what you want? http://jsfiddle.net/9Wg3T/9/ This reason why you cannot get the elements on one line is because you're asking for the width of the ordered list of cats to be the entire line (100%), and you are not accounting for the width of the sidebar already there. — BuddhistBeast, Jul 08 '14 at 01:58
@Bud Yes, your fiddle is what I wanted. It is the same conclusion that David reached in his answer. — Heitor Chang, Jul 08 '14 at 02:04

score 2 · Accepted Answer · answered Jul 08 '14 at 01:46

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/

score 0 · Answer 2 · edited May 23 '17 at 12:11

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.

Unexpected placement of unordered list displayed with inline-block

2 Answers2