Need assistance with CSS - aligning data without tables - css

Question

I am trying to learn CSS, especially I am trying to get away from tables, which are so easy to use.
I created jsfiddle to see what I have done:
http://jsfiddle.net/HMtSY/
I can't align all data into proportional cells. Please assist
<div class="cartItem">
<span class="cartProductTitle">Product</span> <span class="cartProductModel">
Model</span> <span class="cartProductPrice">Price</span>
<span class="cartProductQty">Qty</span> </div>
<div class="cartItem">
<span class="cartProductTitle">This is the product title</span>
<span class="cartProductModel">mdsdre12es</span>
<span class="cartProductPrice">9.95</span> <span class="cartProductQty">1</span>
</div>
<div class="cartItem">
<span class="cartProductTitle">Product 2</span>
<span class="cartProductModel">mds12es</span> <span class="cartProductPrice">
1119.95</span> <span class="cartProductQty">199</span> </div>
<div class="cartItem">
<span class="cartProductTitle">This is the product title product 100000</span>
<span class="cartProductModel">as</span> <span class="cartProductPrice">9.95</span>
<span class="cartProductQty">22221</span> </div>
//CSS
.cartItem
{
display: table-cell;
padding: 5px;
width: 600px;
min-width: 600px;
float:left ;
}
.cartProductTitle
{
display: table-cell;
padding: 5px;
width: 350px;
min-width: 350px;
}
.cartProductModel
{
display: table-cell;
padding: 5px;
width: 150px;
min-width: 150px;
}
.cartProductPrice
{
display: table-cell;
padding: 5px;
width: 30px;
min-width: 30px;
}
.cartProductQty
{
display: table-cell;
padding: 5px;
width: 30px;
min-width: 30px;
}

Answer 1

Not all tables are evil!
Tables for layout are, but this isn't tables for layout, you're displaying tabular data, as in, data which should be displayed with a table!
This means that using a table in your case is perfectly acceptable, and even the correct solution.
So yes, use a table in this case. It's not layout, so it's fine :)

Answer 2

You are creating problems rather than solving them, since an HTML table is the right approach here, but if someone insists, it is possible to simulate HTML tables in CSS (and this might even be meaningful if your data format is generic XML and not HTML). You just need to specify display: table-row for elements that structurally correspond to table rows, like .cartItem elements in your case. (It would also be natural to wrap all such elements in a container, for which you set display: table.)
So just set .cartitem { display: table-row } and remove the float settings. It is natural to remove all the width settings, letting browsers determine the widths of columns, which is one of the basic advantages of using tables (in HTML or as emulated in CSS). Moreover, the last two cells of each row should be right-aligned, as they contain numeric data.
See jsfiddle.