CODEWITHSUNDEEP
htmlcss
RustyIngles
RustyIngles

Reputation: 2493

Place 2 div side by side

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!

Upvotes: 0

Views: 153

Answers (5)

Sam1604
Sam1604

Reputation: 1489

Use the CSS

div {display : block; float : left;}

Upvotes: 0

user3184772
user3184772

Reputation: 13

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

li.mostRead {float:left}

Upvotes: 0

Andy Holmes
Andy Holmes

Reputation: 8077

li { display: inline-block; }

This will put all li items next to each other

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

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

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

Fiddle Demo

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

Here you go.

WORKING DEMO

The CSS Code:

li.mostRead {float:left;}

Hope this helps.

Upvotes: 1

Related Questions