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 trialCarl Hernandez
1,040 PointsFloat not working
http://codepen.io/anon/pen/jbMdPw
Everything else is applying except the float property
4 Answers
TooGOOD ToBEReal
2,360 Pointsyou 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
29,582 PointsTry 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
1,040 PointsJust gave it a shot still not working, also the color isn't either
Caleb Frieze
29,582 PointsTry 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
1,040 PointsThat 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
29,582 PointsLooks 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
2,360 Pointsactually 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
29,582 PointsSo 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
1,512 PointsI 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
1,040 PointsYour 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