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

Posted by Naeem Mirza
Naeem Mirza
9,004 Points

CSS: Floating Images

Why is the height of the image not the same as the first one? I floated both elements and they have the same width but they are coming with different heights?

https://w.trhou.se/tw1vozbq9p

3 Answers

Owa Aquino
Owa Aquino
19,277 Points

Rondie Li is correct. To begin with your images does not have the same height. Usually web/graphic designers adjust their images to same height before using them on the web. The best way is to adjust your images like the code below by adding a height in your img rule.

hotspots img,
activities img {
 height: 350px; // whatever height you need so they'll match
}

But by doing this your image will be stretch out so best advice really is to use an image that already has the same height and width.

Hope this helps.

Cheers!

Rondie Li
Rondie Li
11,415 Points
Rondie Li
Rondie Li
11,415 Points

Hiking.jpg is 1920 x 1280px Railroad.jog is 1920 x 1200px

Changing width will only adjust the width of the image (1920px), and the height will always proportional to its width, therefore they have different height. A fixed height or cropping the image in image editor such as Photoshop would be the easiest solution in my opinion.

Naeem Mirza
Naeem Mirza
9,004 Points
Naeem Mirza
Naeem Mirza
9,004 Points

Thanks Rondie and Owa for the explanation.