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 trialAngela Ramseyer
1,784 Pointsfloat: left; not working
I added the code float: left; to the selected gallery list items. When I saved and refreshed, not all of the images appeared side-by-side in two columns. One image floated left but instead of an image next to it, there is a blank. The images above and underneath it were side-by-side. What am I doing wrong? Here's the code...
gallery li {
float: left;
list-style: none;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
2 Answers
Jason DeValadares
7,190 PointsI think Josh got this. It's usually the element that those items are nested in that's the culprit. If you use Chrome and inspect the element, you'll probably see there's not enough room in the parent element to house any more floats, so it drops them down. You can fix it by either increasing the size of the parent element, or decreasing the size of the items you want to float.
Tom Meysen
4,026 Pointsfirst make sure you give your gallery an "#" since it is an ID.
#gallery li {
float: left;
list-style: none;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
jobbol
Full Stack JavaScript Techdegree Student 17,885 Pointsjobbol
Full Stack JavaScript Techdegree Student 17,885 PointsMore than likely that element is slightly bigger due to any number of reasons. See this article, scroll down to "Problems with Floats" and read "Pushdown".
Also send us a snapshot of your workspace.