Split data into two columns using CSS

Question

What I wanna create is page that fetches results from my DB and display them into two columns like this using CSS (unless theres a better way)...

Row 1 | Row 6
Row 2 | Row 7
Row 3 | Row 8
Row 4 | Row 9
Row 5 | Row 10

The second column should be empty if theres no more than 5 rows.

Answer 1

why not combine this with your web scripting language and css

Answer 2

So if your goal is to have a list that wraps into two columns, there is no standard way to do this in CSS. One method that CSS3 offers (but most browsers don't support) is the columns property, but the bad part about this rule (the last time I checked) is that it forces you to choose up front how many columns you want and you can't specify the idea of "max-columns".

But the best workaround I've found is at A List Apart:

CSS Swag: Multi-Column Lists

But if you just want multiple columns of data, the best solution is to use HTML tables.

Answer 3

if you had a fixed number of rows for column 1

css:

.leftcolumn
{
Float:left;
}
.other
{
display:none;
}

html

<div class="leftcolumn">
return some rows here
</div>

<div class="<? other ?>">
return more rows here
</div>

php or whatever language

if 
[select count(*) from table where foo=bar DESC limit 20,0] >5
other = "other"
else
other = "leftcolumn"