css grid positioning help

[mims1979]

I've got some php code that sucks products, price, and availability out of a database and then spits it out in the following format:


<div style='float:left; width:33%' align='center'><font size='4'>Product</font></div>
<div style='float:left; width:33%' align='center'><font size='4'>Amount</font></div>
<div style='float:left; width:33%' align='center'><font size='4'>Availability</font></div>
<br><br>
<hr color='#000000'>
<div style='float:left; width:33%' align='center'>Product 1</div>
<div style='float:left; width:33%' align='center'>$20.00</div>
<div style='float:left; width:33%' align='center'><font color='#FF0000'>Out Of Stock</font></div>

<div style='float:left; width:33%' align='center'>Product Name<br>second line</div>
<div style='float:left; width:33%' align='center'>$3.00</div>
<div style='float:left; width:33%' align='center'><font color='#0000FF'>In Stock</font></div>

<div style='float:left; width:33%' align='center'>Product 2</div>
<div style='float:left; width:33%' align='center'>$10.00</div>
<div style='float:left; width:33%' align='center'><font color='#FF0000'>Out Of Stock</font></div>

Under most all circumstances this works fine except for the example above. Whenever I have a <br> in the product name it makes everything else past that point all messed up to where the next product name doesn't start all the way to the left but instead starts right after the product name of the previous item with the "<br>" in the name.

This should display like:


Product Amount Availablity

Product 1 $20.00 Out Of Stock
Product Name $3.00 In Stock
Second line
Product 1 $10.00 Out Of Stock

But instead it displays like:

Product Amount Availablity

Product 1 $20.00 Out Of Stock
Product Name $3.00 In Stock
Second line Product 1 $10.00
Out Of Stock



Does any one have a quick and easy solution for this so that it acts more like a table(without using a table)? I'm relatively new to CSS and have been able to figure pretty much all my other issues out except for this. I don't know enough about positioning, etc to solve this. Can anyone else assist? This is a small example of the output as this normally list 100's of products.

[mark87]

It looks like you are trying to create a table with div's... you may have misunderstood when people say tables are bad!

Tables are meant to display tabular data; in your example above, using a table (in my opinion) would be fine. Tables are not designed to be used for layout. :)

[mims1979]

Yes and no. Part of the reason for this is also the fact that I don't want the users to have to wait for 5 minutes for a huge table to load. Its my understanding and my experience that when I put up a table with 1000 rows or whatever that the browser waits until the table is completely downloaded before showing anything on the screen. I this example each row is shown as it is loaded so my users can be reading products while the rest of them continue to load. Am I incorrect in that rational?

[oracleguy]

I agree you should use actual tables here, it is a valid usage for them.

As for the loading problem, why not break the tables up? Make a seperate table for each say 100 rows? That way they wouldn't have to wait for the entire table to load before they can start reading. This gives added benefit to the users that you can put the column headers on each table so they are easy to see even if they are looking at row 530 of 1000.

There might be an alternate approach that is superior but that method would definetly work.

[mims1979]

Well you guys know better than me, so if tables would be fine here then tables it is. Thanks all for the quick responses.

[mark87]

This gives added benefit to the users that you can put the column headers on each table so they are easy to see even if they are looking at row 530 of 1000.

There might be an alternate approach that is superior but that method would definetly work.

http://www.imaputz.com/cssStuff/bulletVersion.html :)

[ronaldb66]

Mark,

Very nice, but that still doesn't address the issue about the 1000+ rows.

mims1979,

I agree with the previous speakers wholehartedly: this is definitely a proper application for table markup. Since you already have PHP available, using this to create a kind of pagination functionality (where the table is presented in "chunks" of a set number of rows, one page at a time, and an accompanying navigation system) shouldn't be too much of a problem.