I need fixed height row, but if I add more data inside the DIV… I want the outer DIV to have horizontal scroll, instead of coming in next line.

I have one main container with lots of DIVs with some texts. when I increase the no of DIVs I need main DIV to have horizontal scroll. But this creates 2nd line to display the extra inner DIVs or doesn’t display the extra DIVs at all. Any Solution?

CSS code:
——————-
.DateBlock
{
display:block; float:left; height:62px; min-height:62px; margin:0px 0px 0px 1px; clear:both; overflow-y:hidden;
overflow-x:scroll;
}

.ColumnDate
{
display:block; float:left; width:39px; border:solid 1px #808080; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000; text-align:center; padding:2px; margin:0px 0px 0px -1px; text-wrap:wrap; height:62px;
}
.ColumnDate a
{
width:40px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000; text-decoration:none; height:62px;
}
.ColumnDate a:hover
{
width:40px; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000; text-decoration:none;
}

.ColumnDate strong
{
font-weight:bold; padding:4px 0px 2px 0px; display:block;
}

HTML code:
———————-
<div class=“DateBlock”>
<div class=“ColumnDate” >02 May 2008 WK7</div>
<div class=“ColumnDate”>02 Apr 2008 WK19</div>
<div class=“ColumnDate”>02 May 2008 WK24</div>
<div class=“ColumnDate”>02 May 2008 WK25</div>
<div class=“ColumnDate”>02 May 2008 WK26</div>
<div class=“ColumnDate”>02 Apr 2008 WK19</div>
<div class=“ColumnDate”>02 May 2008 WK24</div>
<div class=“ColumnDate”>02 May 2008 WK25</div>
<div class=“ColumnDate”>02 May 2008 WK26</div>
<div class=“ColumnDate”>02 Apr 2008 WK19</div>
<div class=“ColumnDate”>02 May 2008 WK24</div>
<div class=“ColumnDate”>02 May 2008 WK25</div>
<div class=“ColumnDate”>02 May 2008 WK26</div>
<div class=“ColumnDate” style=“border-right:solid 1px #808080;”>02 May 2008 WK27</div>
</div>