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

Chany Ventura
Chany Ventura
2,209 Points
Posted by Chany Ventura
Chany Ventura
2,209 Points

How can I put text and picture side by side?

Hi guys, I am just working in a web site for my band, in the second section of the wesite, I would like to put a picture of every member with a short biography side by side with the picture, picture at the left and biography at the right. This is how it look in brackets.

          <section class="la-banda">
     <div class="row">
        <h2>LA BANDA</h2>
     </div>


             <img src="imagenes/kike.JPG" alt="Kike Hercules" title="Kike Hercules">
                 <h3>Kike Hercules</h3>
                 <p class="kike-bio">Luis Enrique Hercules, mas conocido como Kike Hercules, nacio y crecio en El Salvador. A los 20 anos emigro a Canada en donde empezo su carrera musical en una banda llamada Teo Salsa. Fue inspirado por la musica cubana y artistas como Silvio Rodriguez. Mas adelante entregaria su vida al Senor y dedicaria sus talentos de tocar la guitarra y el de la composicion a Cristo. En el 2012 fundo Ministerio Ruah, y hoy cuenta con 4 albumes grabados en su tierra natal.</p>

The text is in Spanish, sorry about that. But for some reason I am having a hard time to do something that shouldn't be that hard. I tried float right and many other, but the <p> is not even moving, I will put 6 pictures with the biography, so ones I make the first one, the rest is just copy and paste.

Thanks

2 Answers

Henrique Vieira
Henrique Vieira
5,003 Points
Henrique Vieira
Henrique Vieira
5,003 Points

Did you float the picture to the left and the text to the right? You have to do both. Check if the picture's width plus the text's width is less than 100%. If that kinda works but looks weird, read about clearfix. There's a video about it on CSS Basics.

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Hey, Chany!

I'd suggest you look into the pattern commonly known as the Media Object. A good reference with multiple techniques can be found at CSS Tricks. Personally, I'd use the Flexbox method.