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 Image Captions

Posted by Angela Ramseyer
Angela Ramseyer
1,784 Points

float: 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;

}

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points
jobbol
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points

More 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.

2 Answers

Jason DeValadares
Jason DeValadares
7,190 Points
Jason DeValadares
Jason DeValadares
7,190 Points

I 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
Tom Meysen
4,026 Points
Tom Meysen
Tom Meysen
4,026 Points

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