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

Erika Green
seal-mask
.a{fill-rule:evenodd;}techdegree
Erika Green
Front End Web Development Techdegree Student 2,514 Points
Posted by Erika Green
.a{fill-rule:evenodd;}techdegree
Erika Green
Front End Web Development Techdegree Student 2,514 Points

One column instead of Two

For some reason I only have one column instead of two. I don't see what I did wrong in the css.

/************ PAGE: PORTFOLIO ************/

gallery {

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

gallery li {

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

Please let me know if you need me to provide more information.

Dylan Hobbs
Dylan Hobbs
9,279 Points

The markup you've provided is a bit messy to read, but from what I can tell it looks like you have both columns floating left.

There are a few ways you can change this.

The easiest would probably be to take out the – float: left; and put in – display: inline-block;

that should work fine for you.

Another method would be to add a class name to each list-item or even use li:nth-child but i'm assuming nth-child is a bit more ahead of where you're at right now and it's not as compatible on previous browsers.

Anyways, you had a unique class to each list-item you could float one left and the other right for example

this applies styling to both list-items .gallery li { margin:2.5%; background-color:#f5f5f5; color:#bdc3c7; }

floats list item left to the left .gallery li .left { float: left; width: 45%; }

floats list item right to the right .gallery li .right { float: right; width: 45%; }

3 Answers

Erika Green
seal-mask
.a{fill-rule:evenodd;}techdegree
Erika Green
Front End Web Development Techdegree Student 2,514 Points
Erika Green
.a{fill-rule:evenodd;}techdegree
Erika Green
Front End Web Development Techdegree Student 2,514 Points

Thank you for all your help!

I actually made a mistake in the html and put the id in the wrong unordered list. Once I put it in the correct one the site had two columns.

tobart
tobart
13,518 Points

Guessed it would be another kind of problem, due to the fact that the code was nearly similar to mine. But great that you figured it out :) best, T!

tobart
tobart
13,518 Points
tobart
tobart
13,518 Points

Hey Erika, did you work in the workspace? If not, some Elements might have predefined padding and margin. In case it might be an option to use the universal selector (if you havn’t applied normalize.css -> which resets default padding and margin). An other thing might be, that you didn’t adress the id’s from the html. You can find my code below. Good luck, and keep me posted about the progress :)

The universal selector

*{
margin:0;
padding: 0;
}

And this is the code that worked for me:

#gallery{
  list-style:none;
  padding:0;
  margin:0;
}

#gallery li{
  float:left;
  width:45%;
  margin:2.5%;
  background-color:#f6f6f6;
  color:#bdc3c7;
}
Dylan Hobbs
Dylan Hobbs
9,279 Points
Dylan Hobbs
Dylan Hobbs
9,279 Points

This will work for you 

#gallery li { 
display: inline-block;
width:45%; 
margin:2.5%; 
background-color:#f5f5f5; 
color:#bdc3c7; 
}

No need to float all elements left. If you do this they will not be displayed into two columns, instead they will be squished to the left of the browser. 

Let me know if it works out :) 

Good luck