Question

I have the following css:

.horizontal-holder1{
float:left;
width:88px;
height:98px;
margin-bottom:15px;
border:1px solid #bdbdbd;
background-color:grey;
}
.white-holder{
width:88px;
height:49px;
background-color:white;
float:left;

.yellow-holder{
width:88px;
height:49px;
background-color:#FFF8DC;
float:left;
} 
.player-holder{
width:60px;
height:49px;
float:left;
}
.score-holder{
width:28px;
height:49px;
float:left;
}

And the following html:

<div class="horizontal-holder1">
    <div class="white-holder">
        <div class="player-holder">
            <? echo $data['username']; ?>
        </div>
        <div class="score-holder">
            0
        <div>
    </div>
    <div class="yellow-holder">
        <div class="player-holder">
            <? echo $data['username']; ?>
        </div>
        <div class="score-holder">
            0
        <div>
    </div>
</div>

The problem is that the yellow holder doesn’t float below the white holder, it goes to the right.

Can anyone see a reason for this?

Thanks

Answer 1

possible issue with the syntax on “score-holder”

<div class="score-holder">
    0
<div>

the closing <div> tag has no end-tag slash (/)

looks okay once the end-tags are fixed: jsfiddle example