Place 2 div side by side

Question

How can I place 2 divs side by side within a li? I've put something here http://jsfiddle.net/n7xUY/ to show what I'm trying to do.

My html is as follows:

<ul class="mostRead">
<li class="mostRead 1">
    <a href="#">
        <div class="ranking-image-container">
            <span class="ranking">1</span>
                 <img src="http://lorempixel.com/100/60/" />
        </div>
        <div class="copy-container">
            <span class="mostReadTitle">
                <h4 class="title">Title 1</h4>
            </span>
        </div>
</a>
</li>

<li class="mostRead 1">
    <a href="#">
        <div class="ranking-image-container">
            <span class="ranking">2</span>
                <img src="http://lorempixel.com/100/60/" />
        </div>
        <div class="copy-container">
            <span class="mostReadTitle">
                <h4 class="title">Title 2</h4>
            </span>
        </div>
</a>
</li>

</ul>

My CSS is as follows:

ul.mostRead { list-style: none outside none; padding-left:0;  }
li.mostRead {}
.ranking-image-container { }
span.ranking {}
span.ranking img {}
.copy-container {}
span.mostReadTitle {}

Basically, I need to get div.ranking-image-container and div.copy-container and their contents on the same line, but I can't work out how to do it!

Answer 1

Here you go.

WORKING DEMO

The CSS Code:

li.mostRead {float:left;}

Hope this helps.

Answer 2

Set display:inline-block;or display:inline; it will make everything in same line

.ranking-image-container,.copy-container {
    display:inline-block;    
}

Fiddle Demo

Answer 3

li { display: inline-block; }

This will put all li items next to each other

Answer 4

the classes are empty in that js fiddle i changed following line:

li.mostRead {float:left}

Answer 5

Use the CSS

div {display : block; float : left;}