Often e-commerce sites display product results in a grid format. If there are a fixed number of results per row, then display:table-row and display:table-cell are enough to make it work in modern browsers. What if you want the number of items in each row to be determined by the available width?
How can a table-like layout be accomplished with a fluid and/or responsive page?
If you have a series of table-cell divs without table-row wrappers, they will all be shown a single row.
If you use float:left, the equal height feature of table-cell is lost.
Using a fixed height can truncate the contents of a product or leave too much white space, so the height should be based on the context of the row.
inline-block is good, but I need the child elements to have fill the parent elements in height and yet act like inline-block, so lets say I set width: 30% and min-width:180px, the elements should drop below and not stay like table cells...
Often e-commerce sites display product results in a grid format. If there are a fixed number of results per row, then display:table-row and display:table-cell are enough to make it work in modern browsers. What if you want the number of items in each row to be determined by the available width?
How can a table-like layout be accomplished with a fluid and/or responsive page?
Any ideas?
...but tables consist of rows and columns.
How can you have an indeterminate number of columns?
inline-block
Inline-block is indeed what I needed, wolfcry. Thanks!
The deals page on this site behaves kinda like that: http://css-tricks.com/deals/
Although it does use floats and min-height, so maybe not perfect for you.
If they don't need to be perfectly table-like, this demo is worth seeing: http://sickdesigner.com/demo/css-masonry/css-masonry.html
I think the future of this is going to be flexbox, but not really worth thinking about yet, since you need production-ready code.
inline-block is good, but I need the child elements to have fill the parent elements in height and yet act like inline-block, so lets say I set width: 30% and min-width:180px, the elements should drop below and not stay like table cells...