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

Nick Jaques
Nick Jaques
2,022 Points
Posted by Nick Jaques
Nick Jaques
2,022 Points

I'm trying to get my images to "float" side by side like the video, except my four images are 1 below each image. help?

My images are re-sizing correctly when I change the size of the browser window, just not pairing up next to each other...

3 Answers

Lisa Tan
Lisa Tan
4,673 Points

Hi Nick,

Referring to the code you initially posted, you have not labelled your selectors correctly. You have not used a class or an id selector, and you have also used photo instead of img. CSS will recognise img but not photo.

You want to tell your image to have a max-width of 50%. This means that two images will sit next to each other and combined they will take up a width of 100% of the element they are sitting in. However, keep in mind that you will want to allow for some margin.

Try something like this:

.main {
width: 960px;
}

.main img {
float: left;
display: block;
max-width: 45%;
margin: 2.5%;
}

You can see here that .main is 960px wide. The images with the .main element are being called in the .main img selector, and we are telling them to each take up 50% of the width (max-width plus margin).

Lisa Tan
Lisa Tan
4,673 Points

Please post your code. Refer to the Markdown Cheatsheet for instruction on how to post code.

Nick Jaques
Nick Jaques
2,022 Points
Nick Jaques
Nick Jaques
2,022 Points

Hi Lisa! Thanks, I went back and had a look and the presentation uses #Gallery and I used two words #Main Photos . When I went back and called my <ul id="main"> it worked! My pictures were out of sync too because one was a pdf drawing that is a different size to my photos I uploaded. So when you told me it wouldn't pick up 'photo' you were bang on. Thanks again! Nick

Lisa Tan
Lisa Tan
4,673 Points
Lisa Tan
Lisa Tan
4,673 Points

Hi Nick, please post your code :)

Nick Jaques
Nick Jaques
2,022 Points
Nick Jaques
Nick Jaques
2,022 Points

Hi, do I just paste it here?

main photos {

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

main photos li {

float: left; width: 45%; margin: 2.5%; background-color: #fff; color: #909296; }

main photos li a p {

margin: 0; padding: 5%; font-size-adjust: 0.75em; color: #909296 }

Bill Hinostroza
Bill Hinostroza
19,273 Points
Bill Hinostroza
Bill Hinostroza
19,273 Points

To make it float side by side add the following css to your img tag

img{
    display: block;
    float: left;
}
'''
Nick Jaques
Nick Jaques
2,022 Points
Nick Jaques
Nick Jaques
2,022 Points

Hi, thanks for your help. I've tried this and it still doesn't work img { max-width: 100%; display: block; float: left; }

hmmmmm.. Did I type your answer into the right place? It's near the top of the CSS as per below..

body{ font-family: 'open sans', sans-serif;

}

wrapper {

max-width: 940px; margin: 0 auto; padding: 5%; }

a { text-decoration: none; }

/* tells the image to stay inside its container */ img { max-width: 100%; display: block; float: left; }

Really appreciate the help!