Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Keeping images aligned to the top

Something tells me this is a stupid question but here goes...

When you are listing inventory items (or images for that matter) in a row and you have images of different heights, the images line up at the bottom. If you see Pinterest they have all their images touching the top of the div or whatever container they use so the smaller pictures will still line up at the top but will fall short of the taller images. This website does it as well <a href="http://static.buytofit.com/?sq=couch">BuyToFit</a>

I know I could always create 4 divs (or however many columns I want) and just place the images in the div which would work but that doesn't seem to be semantic.

Any help would be greatly appreciated. If I can articulate this any further just let me know. Thanks in advance!

7 Answers

Sorry the other website is http://static.buytofit.com/?sq=couch

Also I'm using php to display the inventory items

foreach($products as $product_id => $product) {
                        echo "<li>";
                        echo '<a href="product_page.php?id=' . $product_id . '">';
                        echo '<img src="' . $product["img"] . '" alt="' . $product["name"] . '">';
                        echo '<div id=product_details>';
                        echo "<p class='details'>View Details</p>";
                        echo "</a>";
                        echo '<a href="product_page.php?id=' . $product_id . '">';
                        echo "<p>"; 
                        echo $product["shipping"];
                        echo "</p>";
                        echo "</a>";
                        echo "<div id='line_space'>";
                        echo "</div>";
                        echo "<div id='cart'>";
                        echo '<h4 class="name">';
                        echo $product["designer_name"];
                        echo "</h4>";
                        echo '<a href="product_page.php?id=' . $product_id . '">';
                        echo "<span class='ss-cart'>";
                        echo "</span";
                        echo "</a>";
                        echo "</div>";
                        echo "</div>";
                        echo "</li>";

                    } 
James Barnett
James Barnett
39,199 Points

You're showing products in a grid, seems like tabular data to me. Why not use a CSS table?

Check out this tutorial on CSS Tables

I keep hearing to avoid using tables...? Is this different than using tables in html?

I should have read the article before responding lol..thanks James

The easiest solution would be to make your images the same size, it makes it so much easier to present, and looks better in my opinion.

Buytofit uses javascript/jquery to move the images so they stack like that. Like i said above, I dont like that interface. To have to look at images at different heights on the same row, hurts my eyes.

Good Luck though.

Ha well I appreciate your opinion. I actually changed it so they are all the same size. :)