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

Double Columns and the 'Float' property

So I am at this video stage right now and the I'm using the float: left; property on my gallery and it doesn't seem to be constraining it within two columns even when I set the calculations correctly. I have my width at 45% and my margins at 2.5%. I have my max width for my images set to a 100%. I've literally followed all the instructions on this video and my columns still aren't double aligned. I'm stuck at this point and would like some guidance. If anyone could help, that'd be greatly appreciated.

2 Answers

alex mattingley
alex mattingley
7,508 Points

Hey Zeeshan,

Can you post the code? If you cant do the markdown correctly (its a little tricky sometimes) create a codepen and pass the link over.

From what you said it seems like the issue is that your image width is 100%. You page width should be 100% and your image width should be 45%. If you are already doing this, I would recommend trying a smaller image width, like 40% and see if that works.

Hey Alex, I figured it out actually. The image width is supposed to be a 100%. When I was using the ID selector for gallery, I wasn't being specific enough on the section within the ID. It was supposed to be "#gallery li {}". I just forgot to specify the list items.

alex mattingley
alex mattingley
7,508 Points

ah, yes that will do it. Being specific with selectors can be pretty important. In order to test if you are selecting the right element, I recommend changing the background color to something obvious like red. That will allow you to see if you are actually selecting what you think you are selecting.