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

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

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%;
}

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

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

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?

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

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

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

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?

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

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%;
}