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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Preethi Rajan
Preethi Rajan
499 Points

How to place images side by side?

I have used the property "float: left", but still the images do not appear side by side. Also, when I restore my browser, there is no effect in it. Help me please!

2 Answers

Nathan Smutz
Nathan Smutz
9,492 Points
Nathan Smutz
Nathan Smutz
9,492 Points

Did you set the width to 45% yet? The images have to be small enough that two of them fit side-by-side in their container. Also make sure the margin is set to 2.5% just in case the default margin is bigger and might make things bigger things too wide to fit.

Aldrin Mabanta
Aldrin Mabanta
11,768 Points
Aldrin Mabanta
Aldrin Mabanta
11,768 Points

This is how you would normally have images side by side

HTML CODE <ul id="gallery"> <li> <a href="img/Dumb Thing .png"> <img src="img/dumb thing.png" alt=""> <p>Lorem Ipsum</p> </a> </li> <li> <a href="img/Dumb Thing .png"> <img src="img/dumb thing.png" alt=""> <p>Lorem Ipsum</p> </a> </li> <li> <a href="img/Dumb Thing .png"> <img src="img/dumb thing.png" alt=""> <p>Lorem Ipsum</p> </a> </li>

        </ul>

and the styling ...

CSS CODE

#gallery li {
  float: left; 
  width: 35%; 
  margin: 2.5%; 
  background-color: #f5f5f5; 
  color: #bdc3c7; 
}