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

Darren Kynaston
PLUS
Darren Kynaston
Courses Plus Student 15,610 Points
Posted by Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

float: left; - not working correctly

I have followed the video instructions correctly (as far as I'm aware) and everything has turned out the same as the instructors example UNTIL the float: left; to create a two column gallery. I have entered the css code as shown on the video but the images are still stacked on-top of each other (i.e. one column). Can anyone take a look at my css code (or) have any suggestions?

Darren.

Link http://web-1sq3f5d1mz.treehouse-app.com/index.html

I have sorted the problem now after looking through the css #gallery li {} I had made a typing error.

3 Answers

marcinlisewski
marcinlisewski
19,839 Points
marcinlisewski
marcinlisewski
19,839 Points

main.css line 87 :

#gallery li {
float: left;
width: 45%; // you have widows!! <-- correct this line:)
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
Darren Kynaston
PLUS
Darren Kynaston
Courses Plus Student 15,610 Points
Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

Thanks for your reply, I noticed that myself but I really appreciate your super fast reply! =)

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Make sure that each element's box model is small enough that there are enough pixels for the two elements to float side by side within their parent element. Things like paddings and borders can make the elements box model big enough they stay stacked. This is where the CSS property box sizing really shines. Here is a cheap example, cause if you're like me, I'm a visual learner. http://codepen.io/kevink/pen/xFjnr

EDIT* Your link wasn't there when I started writing this response. I see it's not relevant here, but I'm going to leave it here anyway! Glad you got it sorted.