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

Posted by Clint Rogers
Clint Rogers
869 Points

(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
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>

Clint Rogers
Clint Rogers
869 Points

THANK YOU SO MUCH!!!!!

Michael Singleton
Michael Singleton
6,253 Points
Michael Singleton
Michael Singleton
6,253 Points

is gallery a class or an id?

Clint Rogers
Clint Rogers
869 Points

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

Clint Rogers
Clint Rogers
869 Points

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

Jonathan Romine
Jonathan Romine
9,344 Points
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{

}