Currently, I am developing a mobile site with a fluid layout. The main page features a table that displays several products.
Within each product, there are 3 divs: product-image, product-name, and prices-container.
I'm faced with the challenge of aligning the prices-container div horizontally across the table rows.
Two possible solutions come to mind: either make product-name match the height of the tallest one in the table row, or have prices-container stick to the bottom of the product's table cell. However, implementing either approach has proven difficult for me.
For a visual representation of the issue, take a look at this illustration. The left image depicts the current problem, while the right image shows the desired outcome.
The crux of the problem lies in the fact that the height of product-name varies due to dynamic text content. It could span from just one line to several lines.
I've set up a CodePen demo for you to review my code and better understand the issue >> Check it out here << (Please excuse the unsightly background colors, they're used for troubleshooting purposes).
My HTML is written in Jade, and my CSS is stylized using Stylus.
Here are the limitations:
- Solution must rely solely on CSS & HTML, without involving JavaScript
- Design should accommodate fluid layouts (width defined by percentage)
- Avoid setting a fixed height for product-name since it contains variable text
If you have any innovative ideas on how to tackle this challenge, I would greatly appreciate your input! Thank you! :)