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

Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points
Posted by Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

Getting the gallery symmetrical???

I tried to make my own image gallery, Somehow I am not able to get the two column gallery symmetrical. Can someone please help me out?

http://w.trhou.se/y8v3gb3ssn

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

The columns are not symmetrical because the height of your top right image+text is different than the other images because it has less text, reducing the height of it's parent container.

The easiest fix without going into anything to advanced or complicated would be to set a fixed height for the container or change the text to match the others so they have matching size.

Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points
Abhishek Gangadhar
Abhishek Gangadhar
9,467 Points

How can I make all of those heights the same??

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

In your main.css add a height value to #wrapper li { } in the wrapper section.

#wrapper li{
  width:45%;
  margin:2.5%;
  float:left;
  background:#888;
  list-style:none;
  height: 500px; /* Change value to what you require */
}