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

HTML

JJ T
JJ T
6,276 Points
Posted by JJ T
JJ T
6,276 Points

Alligning three pictures next to eachother using HTML & CSS

I want to place the 3 pictures exactly next to eachtother. I also want them to have the same height and width. I just can't seem to do it. I would really appreciate any tips.

Here's a snapshot

https://w.trhou.se/mi91biduwt

3 Answers

Karan Nahar
Karan Nahar
16,157 Points

I used inline-block because inline-block elements are block elements that behave as inline elements. We can set height and width for these elements. You can do it with float but you have to use the clear property to clear floats. Inline-block just makes it easier. Here is an example - (https://www.w3schools.com/css/css_inline-block.asp)

Using margin and width : I used this because browsers have inconsistencies. To ensure Responsive design I use margin: 0 auto to make text and other items appear at the center and width 100% to make the container responsive. Of course it is a your choice to used it or not.

Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

Hi! here is your solution. I have placed the images next to each other with equal width and height and placed it at the center.

Solution snapshot : (https://w.trhou.se/55qdp5mxza)

Feel free to ask any other question. Happy to help.

JJ T
JJ T
6,276 Points
JJ T
JJ T
6,276 Points

Thank you so much.

Can you maybe explain your code ? Why do you use an inline block and why not work with float ?

What's the purpose of:

-- margin: 0 auto;

-- width: 100%;

Because if I run the program without these two it works just fine.

Jennifer Goltz
Jennifer Goltz
9,149 Points
Jennifer Goltz
Jennifer Goltz
9,149 Points

Inline=block will make them boxes next to each other, while float is more of a 'pick a side' indicator. Float won't put them on the same line even if there is space.