Doesn't float properly - boxes everywhere - html

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

Answer 2

Properly close the .score-holder
It's a good practise to name your classes by their purpose not appearance (.yellow-holder .second-team-holder).
Why do you put float:left everywhere?
Add } after .yellow-holder CSS definition

Answer 3

You're missing a / in some of your closing tags, and a } in your CSS.
<div class="horizontal-holder1">
<div class="white-holder">
<div class="player-holder">
<? echo $data['username']; ?>
</div>
<div class="score-holder">
0
</div> <!-- here -->
</div>
<div class="yellow-holder">
<div class="player-holder">
<? echo $data['username']; ?>
</div>
<div class="score-holder">
0
</div> <!-- and here! -->
</div>
</div>
.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;
} /* whoops! */
.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;
}
All fixed: http://cssdesk.com/LT5tL