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!

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

(Fixed) Help with the two column lay out.

I'm having trouble with my two column lay out. I've re-watched the video and re done the code in CSS and HTML, but it will NOT show in two columns. I've pasted my CSS code below, any help would be much appreciated! https://w.trhou.se/ztd0piu3yh

Thanks, Clint

3 Answers

Jonathan Romine
Jonathan Romine
9,344 Points

you need to close the list item for each item
<li> <a href="img/kittens.jpg"> <img src="img/kittens.jpg" alt=""> <p>Kitten Earrings from my "Animal" line.</p> </a>

</li>

just repeat (</li>) after every </a>

THANK YOU SO MUCH!!!!!

is gallery a class or an id?

it's an ID, however when I copied it from workspaces, it didn't show up with the # in front of gallery, my coding looks like this #gallery

https://w.trhou.se/ztd0piu3yh is my snapshot link

Jonathan Romine
Jonathan Romine
9,344 Points

Try this!

.gallery { margin: 0 auto; padding: 0; list-style: none; width:100%; max-width: 1080px;/max container width/ } .gallery li { display: inline-block; /or float:left;/ width: 45%; padding: 2.5%; background: white-smoke; color: #bdc3c7; border: solid 1px #eee; -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ / -moz-box-shadow: 3px 3px 5px 6px #ccc; / Firefox 3.5 - 3.6 / box-shadow: 3px 3px 5px 6px #ccc; / Opera 10.5, IE 9, Firefox } .gallery li .wrap{ margin: .9375em text-align:center; } .gallery li .wrap img{ width: 100%; hight: auto; margin-bottom: .9375em; } .gallery li .wrap h5 { font-weight:bold;

} .gallery li .wrap p{

}