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 Style the Portfolio

Posted by Carl Hernandez
Carl Hernandez
1,040 Points

Float not working

http://codepen.io/anon/pen/jbMdPw

Everything else is applying except the float property

4 Answers

TooGOOD ToBEReal
TooGOOD ToBEReal
2,360 Points
TooGOOD ToBEReal
TooGOOD ToBEReal
2,360 Points

you just got to write you code between 3 backslash= alt96 and the language your using if it is html before you write the code you write html or if your are using css you write css open with 3 backslash the language your are using, your code, then close it with 3 backslash again and that's it.

Caleb Frieze
Caleb Frieze
29,582 Points
Caleb Frieze
Caleb Frieze
29,582 Points

Try this

#gallery li {

  width: 45;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
#gallery {
  float: left;
  padding: 0px;
}

You were applying the float specifically to the li tag so it would only float to the left of the ul.

Carl Hernandez
Carl Hernandez
1,040 Points

Just gave it a shot still not working, also the color isn't either

Caleb Frieze
Caleb Frieze
29,582 Points

Try adding this to make the color on your text work. Interesting that the float isn't working. What browser are you using? Also what are you trying to make it look like? The float is working for me in firefox and should be in chrome. 

#gallery li a {
  color: #bdc3c7;
}

This adds the color directly to the link, since the a tag's default styles are more specific in this situation.

Carl Hernandez
Carl Hernandez
1,040 Points

That didn't work for the color either even copied and pasted it. I'm using chrome. And from the video it supposed to have the images side by side in two columns. I'm being sure to save and refresh.

I even tried to apply the float to the

img { max-width: 100%; }

that comes earlier in the css but that didn't help either

Caleb Frieze
Caleb Frieze
29,582 Points

Looks like a percent sign was left off of the width in your codepen. Not sure if that's the true issue.

I just went through the course and passed with this code.

img {
  max-width: 100%;
}
#gallery {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
TooGOOD ToBEReal
TooGOOD ToBEReal
2,360 Points
TooGOOD ToBEReal
TooGOOD ToBEReal
2,360 Points

actually the real problem is not the css but the html you forgot to close the wrapper,gallery and the section, beside the box is floated to the left by default, i'm not sure if you were trying to float it to the right. it should be like this:

<div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture.</p>
        </a>
      </li>
      </div>
  </section>
</div>
Caleb Frieze
Caleb Frieze
29,582 Points

So actually not closing off elements is not the problem. HTML will still work if you don't close them off, but it's better to close off your HTML just in case you have to anticipate more markup when dealing with modular files. His original code is functionally correct.

Francisco Caceres
Francisco Caceres
1,512 Points
Francisco Caceres
Francisco Caceres
1,512 Points

I am having the same issues. The images are shrinking to the set width but everything else isn't working. It still shows the bullets from li and its not floating. I watched the video almost 5 times already to see if i missed a step but everything is the same. Even checked my HTML, everything looks fine there too. Help Please. Also how can i copy my code on here so you guys can take a look at it and see what's wrong? Thanks.

Carl Hernandez
Carl Hernandez
1,040 Points

Your best bet is to form your own question. And you can link them to a codepen page like i did, i'm not too familar with the website yet so im not sure how they post those screenshot type lines yet