Why are these divs not sitting under each other???????

[popcop]

I have divs with the ID of 'row' and for some reason they are not sittin under each other

Any reason why this is happening??

Here is my HTML:

<div id="content">

<div id="left">

<div class="slider_header">
<a id="v_slidein" href="#">Show</a> - <a id="v_slideout" href="#">Hide</a>
</div><!-- close slider_header -->

<div id="vertical_slide" >Gerry Mckay<br />
<br />
gerrymckay@live.com
<br />
<br />
07762514868
</div>
<!-- close vertical_slide -->

</div><!-- close left -->

<div id="main_section">

<div class="row">
<div class="thumb_holder"><img src="images/concepts/fm_01.jpg" width="230" height="245" /></div>
<!-- close thumb_holder-->
<div class="thumb_holder"><img src="images/concepts/fm_02.jpg" width="230" height="245" /></div>
<!-- close thumb_holder-->
</div>

<div class="row">
<div class="thumb_holder"><img src="images/concepts/planethouse_02.jpg" width="230" height="192" /></div>
<!-- close thumb_holder-->
<div class="thumb_holder"><img src="images/concepts/planethouse_03.jpg" width="230" height="192" /></div>
<!-- close thumb_holder-->
<div class="thumb_holder"><img src="images/concepts/planethouse_04.jpg" width="230" height="192" /></div>
<!-- close thumb_holder-->
</div>


</div><!-- close main_section-->

</div><!-- close content -->

Here is my CSS:

#content {
width:100%;
}

#main_section {
display:block;
margin-left:225px;
background-color:#099;
}

.row {
background-color:#FF0;
height:100%;
}

.thumb_holder {
margin-right:10px;
margin-bottom:10px;
float:left;
padding:10px;
background-color:#ffffff;
}

[criterion9]

Might it perhaps be the "height:100%" you are setting on your rows?