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
JJ T
6,276 PointsAlligning 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
3 Answers
Karan Nahar
16,157 PointsI 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
16,157 PointsHi! 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
6,276 PointsThank 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
9,149 PointsInline=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.