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 Anouk Wijnhoud
Anouk Wijnhoud
1,387 Points

which method should I use for placing images next to paragraphs?

Hi guys, I am working on a learning project, developing a mockup website for myself. I want illustrations next to some of my paragraphs.

what is the best method of doing this? I was trying to do it with padding, margin and border but it gets flunky in other viewports.

I just figured out about flexbox and the grid system and I hope those methods are good for what I am trying to do.

how do I need to structure it so it is next to eachother but still some white space betweent the elements?

thanks a lot in advance!

edit: I went trough the css flexbox course and found the solution! what I was looking for was using flexbox with the space-between property. it pushes one side of the content to the left and the other side to the right.

A R
A R
12,834 Points
A R
A R
12,834 Points

Hi Anouk, did you figure out how to make your project work?

Anouk Wijnhoud
Anouk Wijnhoud
1,387 Points

Hi A R , no I haven't yet. I am currently going trougth the flexbox course and I hope I might find my solution there. I tried the suggestions from the comments but the floats did not give the effect I was searching for.

I also tried the padding, margin and border way but it becomes real clunky and it gets in the way of my other elements. and it gets weird on smaller view ports.

3 Answers

Zimri Leijen
Zimri Leijen
11,835 Points
Zimri Leijen
Zimri Leijen
11,835 Points

I found this website to be very helpful for learning flex.

Flex is indeed a good tool to use for this usecase.

A R
A R
12,834 Points
A R
A R
12,834 Points

A float might also be what you're looking for: https://css-tricks.com/all-about-floats/

Zimri Leijen
Zimri Leijen
11,835 Points

I'd say floats are a bit more difficult, but they're an option