Problems with display inline

Question

I'm creating a website with drop down navigation, but in it my divs (the ones with display inline) aren't displaying inline. I don't believe that I am doing anything wrong, but the display inline is not working.

The gist of it is that this code:

<h1 id="name">LFX Music</h1>
<div class="click-nav" style="display: inline;">
<ul class="no-js">
    <li>
        <a href="#" class="clicker">Profile</a>
        <ul>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Privacy</a>
            </li>
            <li>
                <a href="#">Help</a>
            </li>
            <li>
                <a href="#">Sign out</a>
            </li>
        </ul>
    </li>
</ul>
</div>
<div class="click-nav1" style="display: inline;">
<ul class="no-js1">
    <li>
        <a href="#" class="clicker1">Profile</a>
        <ul>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Privacy</a>
            </li>
            <li>
                <a href="#">Help</a>
            </li>
            <li>
                <a href="#">Sign out</a>
            </li>
        </ul>
    </li>
</ul>
</div>
<script src="scripts/js/navigation.js"></script>

Doesn't dislpay the two divs side by side

Here is the jsfiddle with all of the code: JSFiddle

Also, is there a better way I can process the menu with jQuery?

Thanks, for your help!

Answer 1

Remove display:inline use float:left or display: inline-block

div {
    float:left;
}

or

div {
      display:inline-block;
}

If you want to know the difference between display:inline and display:inline-block take a look at this .

As for float:left it's pretty much self explanatory but this can help.