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

HTML How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Posted by Unsubscribed User
Unsubscribed User
Courses Plus Student 3,156 Points

float left

I'm stuck on this question. I need to float the text left and set width to 45%... I keep getting the notification to 'float gallery left'. I can't see where I'm going wrong.

Thank you in advance

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
    max-width:100%;
}

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


#gallery list {
 float: left;
  width: 45%;
}
Unsubscribed User
Unsubscribed User
Courses Plus Student 3,156 Points

Thanks, Rich that's helped me a fair bit. I'll stick with it and hope that some of it at least starts to make sense.

3 Answers

Rich Bagley
Rich Bagley
25,869 Points

Hi Mark,

You're almost there. Instead of using the following:

#gallery list {

...you'll need to change this to:

#gallery li {

Hope that helps :)

-Rich

Unsubscribed User
Unsubscribed User
Courses Plus Student 3,156 Points

Thank you, Rich. This worked for me.

I'm still finding this very difficult and starting to feel as though I'm in above my head like I won't be able to replicate anything I've already done once I complete this course. As you're a Mod here; should this start clicking into place anytime soon you think?

Rich Bagley
Rich Bagley
25,869 Points

Hi Mark Winter,

Glad you're sorted.

Don't worry about not getting it straight away, people learn at different speeds and in different ways. It'll start to click soon and you'll find that the more you do it, the more it sticks.

I'd also say don't just rely on one resource. Use other tools such as w3schools, MDN, Stack Overflow and especially Google.

Being a mod has nothing to do with it though :)

-Rich

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

You need to move your float up the #gallery{} selector.

Also I am not sure what you are trying to target with #gallery list {}.

Unsubscribed User
PLUS
Unsubscribed User
Courses Plus Student 3,156 Points
Unsubscribed User
Unsubscribed User
Courses Plus Student 3,156 Points

I don't know what I'm trying to target, I don't find this very intuitive.

I now have:

gallery {

float: left; width: 45%; margin:0; padding:0; list-style:none; }

which, to me, has 'moved float up' as you say... but it still doesn't work. Am I still not understanding something?

Rich Bagley
Rich Bagley
25,869 Points

Hi Mark,

To extend my answer above try replacing the code you had added with the following:

img {
    max-width:100%;
}

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


#gallery li {
 float: left;
  width: 45%;
}

I tested this in the challenge and it seemed to work for me. Does that help for you?

-Rich

Aaron Brown
Aaron Brown
4,428 Points
Aaron Brown
Aaron Brown
4,428 Points

Rich is right, you need to target the list items in the gallery to add the width and float to like so:

#gallery li {
    float: left;
    width: 45%;
}