Block elements within div in CSS

Question

I'm trying to make 2 divs appear on separate lines within an outside div. Right now I have display:inline-block set for both of them, but I'm not sure how to change this to make them appear on separate lines.

Here is what my code looks right now, I would like John Doe and 100 to appear on separate lines within the leader div:

http://jsfiddle.net/ZnuPR/

HTML

<ul>
    <li class="leader">
        <div class="ranking">1</div>
        <div class="name">John Doe</div>
        <div class="score">100</div>
    </li>
</ul>

CSS

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
    height: 75px;
}

.ranking {
    display: inline-block;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    display: inline-block;
}

.score {
    display: inline-block;
}

Answer 1

You could simply float .ranking and then leave .name and .score as display: block .

http://jsfiddle.net/ZnuPR/7/

.ranking {
    /* ... */
    float: left;
}

Answer 2

The fastest solution is to set the ranking to "float:left;" and the name and score to "display:block;". Block level elements span 100% by default which will make sure the 2 elements are on seperate lines.

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
    height: 75px;
    }

.ranking {
    float:left;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    display: block;
}

.score {
    display: block;
}

http://jsfiddle.net/ZnuPR/2/

Answer 3

I think this is what you mean:

http://jsfiddle.net/ZnuPR/6/

Don't use inline-block and remove the height from the container, it will automatically adjust to the height it needs to be.

Answer 4

http://jsfiddle.net/ZnuPR/8/

Added a .details wrapper and some floats.

.ranking {
    float:left; /* Floating */
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}
.details {
    float:left; /* floating */
}

.name {
    display: block; /* Changed to block */
}

.score {
    display: inline-block;
}

<ul>
    <li class="leader">
        <div class="ranking">1</div>
        <div class="details"> 
          <div class="name">John Doe</div>
          <div class="score">100</div>
        </div><!-- end details wrapper-->
    </li>
</ul>

Answer 5

I think this could be useful:

http://jsfiddle.net/ZnuPR/10/

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
}

.ranking {
    width: 100%;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    width: 100%;
}

.score {
    width: 100%;
}

Answer 6

This is what I did:

CSS

.leader {
        border: 1px solid;
        background-color: #E6E6E6;
        display: inline-block;
        width: 400px;
        margin: 2px;
        padding: 2px;
        background-repeat: no-repeat;
}

.ranking {
    display: inline-block;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

I got rid of display: inline-block and height