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…
Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".