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

Posted by Sam Blumberg
Sam Blumberg
439 Points

When i try to format my pictures into 2 columns they go out of proportion and overlap each other.

http://port-80-ibd0kgsfj9.treehouse-app.com/ that is what happens.

Is this because my images are not all the same size and if so how do i fix it as they are not all in the same proportions. here is the segment of code that is causing this

gallery {

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

gallery li {

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

thanks for the help

3 Answers

Lynde Roberts
Lynde Roberts
8,016 Points

Sam,

Just noticed a syntax error in your main.css for the img rule:

img { max-width 100%; }

Note that the : is missing after max-width.

The browser is ignoring this rule as a result.

Lynde

Sam Blumberg
Sam Blumberg
439 Points

Thanks a lot, that was the problem Sam

Jon Benson
Jon Benson
12,168 Points
Jon Benson
Jon Benson
12,168 Points

Sam,

It really helps to use the Markdown Cheatsheet when you code, so it looks like a text editor, and is easier to process. What I see is that you are floating your li left, and none right away from the others. Are they Block elements or inline block? That will define how they appear as well.

So a little more code would help me. All the best!

Jon

Lynde Roberts
Lynde Roberts
8,016 Points
Lynde Roberts
Lynde Roberts
8,016 Points

Sam,

Looks like all you need is to add this to your main.css stylesheet:

img {

max-width: 100%;

}

Adding this will prevent your images from extending outside of their containers.

Best,

Lynde

Sam Blumberg
Sam Blumberg
439 Points

Hi Lynde, I have that in my main.css but I still have that problem. do all of the images have to be the same size or is it something else. thanks for the reply sam