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 trialKevin Barnes
18,352 PointsKeeping 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!
2 Answers
Tom Bedford
15,645 PointsLess float: left
, more display: inline-block
.
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
18,352 PointsEdit, 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?!)