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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Peter Kalinowski
Peter Kalinowski
5,668 Points
Posted by Peter Kalinowski
Peter Kalinowski
5,668 Points

photos are scattered and not lined up in 2 columns

#photos {
    margin: 0;
    padding: 0;  
    list-style: none;
}

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

after putting this code in all the photos are scattered.

they are nicely aligned in one column when i take out width:45%;

and yes my ul id="photos

<ul id="photos">
                <li>
                    <a href="images/pete&tara_dolomites.jpg">
                    <img src="images/pete&tara_dolomites.jpg" alt="Peter and Tara">
                    <p>Tara and I at the Dolomites in Italy</p>
                    </a>
                </li>

2 Answers

Conrad Turuk
Conrad Turuk
5,144 Points
Conrad Turuk
Conrad Turuk
5,144 Points

Couple things:

Can you confirm that you have the right element selected? Are you working with an ID or a class? ID's vs. classes will determine which cascading effects will take place. ID's always carry more weight than classes; therefore, If you have a element assigned to a class that is within an element with an ID, the ID CSS code will take effect.

Additionally, what kind of browser are you using and how big is it? Depending on the width of your browser it will cause the images to float in a weird fashion. If you keep going forward in the html course, they will explain that you need to clear one of the images before they will align properly (I think its part of the responsive web design videos regarding media queries).

The code they used in the media queries in css was:

#gallery li:nth-child(4n) {

clear: left;

}

Try that and see what comes of it. I have some other ideas but we should start here. If that doesn't work, could you fork your workspace here? Then I could look at it try to solve it that way.

Alex Watts
Alex Watts
8,396 Points
Alex Watts
Alex Watts
8,396 Points

Hello Peter,

Be sure to add the css property max-width to your images, and set its value to 100% (see below). 

#photos img {
 max-width- 100%;
}

This code will force your images to fill their container #photo li.

Hope this solves your problem :)