Use divs to display data in two columns - asp.net

Question

I'm trying to format the data display HTML below using CSS. I want the data to display in two columns within each dataContentSection div. The solutions I have seen so far require you to specify another div within the dataContentSection, one for the left and one for the right.
What I want to do is specify a height on the dataContentSection divs and then have the data within it listed on the left and then automatically move to the right after the list runs out of room on the left. E.g.
Part A
Col1: foo Col4: 05/11/1955
Col2: bar Col5: Choo
Col3: 32
Part B
Col6: foo Col9: 05/11/1955
Col7: bar Col10: Choo
Col8: 32
I have used Col1, Col2, Col3 etc. for this example but they will actually be data fields returned by a dataset.
<div class="dataContentSection">
<span class="titleText">Part A</span>
<br />
<div id="Col1">
<span class="dataFieldText">Col1</span>
<span class="dataFieldValue"><%# GetValue("Col1")%></span>
</div>
<div id="Col2">
<span class="dataFieldText">Col2</span>
<span class="dataFieldValue"><%# GetValue("Col2")%></span>
</div>
<div id="Col3">
<span class="dataFieldText">Col3</span>
<span class="dataFieldValue"><%# GetValue("Col3")%></span>
</div>
<div id="Col4">
<span class="dataFieldText">Col4</span>
<span class="dataFieldValue"><%# GetValue("Col4")%></span>
</div>
<div id="Col5">
<span class="dataFieldText">Col5</span>
<span class="dataFieldValue"><%# GetValue("Col5")%></span>
</div>
</div>
<div class="dataContentSection">
<span class="titleText">Part B</span>
<br />
<div id="Col6">
<span class="dataFieldText">Col6</span>
<span class="dataFieldValue"><%# GetValue("Col6")%></span>
</div>
<div id="Col7">
<span class="dataFieldText">Col7</span>
<span class="dataFieldValue"><%# GetValue("Col7")%></span>
</div>
<div id="Col8">
<span class="dataFieldText">Col8</span>
<span class="dataFieldValue"><%# GetValue("Col8")%></span>
</div>
<div id="Col9">
<span class="dataFieldText">Col9</span>
<span class="dataFieldValue"><%# GetValue("Col9")%></span>
</div>
<div id="Col10">
<span class="dataFieldText">Col10</span>
<span class="dataFieldValue"><%# GetValue("Col10")%></span>
</div>
</div>

Answer 1

#spangeman; you can use css3 column-count property for this you can check my example here
How to stack divs from top to bottom in CSS
for example http://jsfiddle.net/sandeep/pMbtk/
but it's not work IE for that you can use column-count js pulgin

Answer 2

CSS
div.dataContentSection div {
height: 100px;
width: 100px;
float: right;
}
I hope this helps

Answer 3

<style>
.dataFieldText{display:inline;}
.dataFieldValue{display:inline;}
</style>