Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Posted by Kevin Barnes
Kevin Barnes
18,352 Points

Keeping images together on a new line

Hi,

Simple question here I'm sure, with float: left; applied I'm noticing if the left-hand gallery item has a larger <p> height than that of the right-hand gallery item, then the left-hand item on the following row floats around this item.

Is there a simple way to stop this happening so that the height of the left-hand element is reflected by the right-hand element and the next row presents 2 columns, not just 1 which is floating around the taller left-hand element above.

The image below should illustrate better. Using the code from the lesson, at a larger size where the text takes up the same height it's all OK, but then when made smaller & the text in a left-hand box is bigger then the element on the next row floats around it, rather than starting a new row beneath both left & right elements.

Thanks!

problem image

2 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Less float: left, more display: inline-block.

have a look at this pen

Specifically: 

div {
  display: inline-block;
  vertical-align: top;
}

Use the vertical-align to set the vertical position of the divs when one is shorter than the other (e.g. line up at the top or bottom).

Kevin Barnes
Kevin Barnes
18,352 Points
Kevin Barnes
Kevin Barnes
18,352 Points

Edit, sorry - Tom, that works a treat, had to do a little resizing from what I originally had to keep things consistent across all sizes but that's not a detriment.

I'd still appreciate any other takes on this based on the fact the lesson specifies float: left; - I'm interested to see if there's a way to develop that (or perhaps I'm getting ahead of myself?!)