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

Frankie Guerra
Frankie Guerra
3,739 Points
Posted by Frankie Guerra
Frankie Guerra
3,739 Points

Trouble getting my pictures to go into 2 columns.

I chose my own 4 photos that are all different sizes. I did the float, width, and margin exactly the same as in the example. It does re-size the photos in my browser when I shrink the window. All 4 of my photos are different sizes and do become the same size stacked on top of each other when I shrink the window enough. However, I am unable to make 2 columns, only one.

Shouldn't this work: Float: left; width: 45%; margin: 2.5%

Do the pictures have to be the same size in order for the 2 columns to occur. This is the only difference I can find from the project files and my own.

Thank you, Frank

5 Answers

royalcompass
royalcompass
4,758 Points

Try this by adding the li your targeting the actual items in the list as I stated in the first answer, wthout the li you are actually not applying your css to the list but the gallery in whole overriding the css right above this rule.

#Gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
    }
royalcompass
royalcompass
4,758 Points
royalcompass
royalcompass
4,758 Points

first thing is you dont have a ; on the end of that line of code so the margins are being disregarded and default margins might be in use causing the elements to drop down. Also make sure your not only targeting the gallery but the list items in the gallery. The pictures are list items.

Frankie Guerra
Frankie Guerra
3,739 Points
Frankie Guerra
Frankie Guerra
3,739 Points

Thanks but it is on there. Here is my copy/pasted code

Gallery {

    margin: 0;
    padding: 0;
    list-style: none;
    }

#Gallery {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
    }
Frankie Guerra
Frankie Guerra
3,739 Points
Frankie Guerra
Frankie Guerra
3,739 Points

Thanks for your help. I made those changes and it worked!

royalcompass
royalcompass
4,758 Points
royalcompass
royalcompass
4,758 Points

no problem...