I'm working on a product index for a website. It lists all of the products for a specific category. I'm having a hard time finding a way to code this without using tables. It is kind of hard to explain, so I attached a picture. I circled the part I am having a hard time coding in red. I have tried using a list (ul), or just separate divs, but I haven't had much luck. Does anyone have any ideas for a best practice on how to organize an index like this? If you want to see how the rest of the page is coded you can go to www pool-zone com.
I'd make the background part thing with the rounded corners a div (with the image as a background). I'd have three floats inside it, for the top three items. The middle floated item could hold the side divider things. Inside each float: Top text maybe a <p>, then image marign:0 auto, then the cart button (is that a submit or something with Javascript?) in whatever element is appropriate for that bottom text. The div with three floats is almost 100% width of that area (assuming that area's a container) otherwise it depends on the rest of the page how that div is set in there. Underneath then is the next div with the same class name (cause same background image) also with three floats, and so on. Another option is to just float everything and do something else for the rounded borders. Here's an example of floating everything (it was an example for another company, so I only used the same image over and over... this trick works pretty much only when each float is the same size): http://stommepoes.jobva.nl/VanLeeuwenGlas/glasherstel.html Hope this helps.
Simply align your content how you want it into a div. Specify a height, width and float it left. Do the same with other 2. Drop all that into a container div with a background image showing curves and dividers. Job Done. Repeat as required
Stomme, Thanks for the technique. I did not consider using floats to get them to line up like that. Thanks for linking to an example as well. It is very informative.