CODEWITHSUNDEEP
asp.nethtmlcss
Hoody
Hoody

Reputation: 3381

Use divs to display data in two columns

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>

Upvotes: 0

Views: 2566

Answers (3)

sandeep
sandeep

Reputation: 92793

@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

Upvotes: 1

mooglife
mooglife

Reputation: 226

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

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

CSS

div.dataContentSection div {
 height: 100px;
 width: 100px;
 float: right;
}

I hope this helps

Upvotes: 0

Related Questions