Inline display for div within div

Question

I have a HTML page with structure like below:

<div id="frst">
FIRST
</div>
<div id="top">
    <div id="mid">
        <div id="bottom">
            <ul class="menu">
                <li>A</li>
                <li>A</li>
                <li>A</li>
            </ul>    
        </div>
    </div>
</div>   

And the CSS I have wrote :

#frst{
display:inline;
}
#top,#mid,#bottom{
display:inline;
}
.menu li
{
    display:inline;
}

I want to display the divs with id first and top inline. But its displaying top div below the div first ! How can I make them inline ?

Answer 1

Try with this:

use display:inline-block;

#top{
  display:inline-block;
}

Example