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.

HTML

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,143 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,143 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

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

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.