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

Lindsey Osborne
Lindsey Osborne
1,642 Points
Posted by Lindsey Osborne
Lindsey Osborne
1,642 Points

Floated images aren't displaying as shown in video

I have used the float: left property on my gallery and the first two images have displayed beside each other but the third image is on the right hand side with white space to the left. Then images four and five are beside each other underneath. I can't understand why the third image is on the right?

5 Answers

savan patel
savan patel
2,272 Points
savan patel
savan patel
2,272 Points

hey Lindsey Osborne !

This code below might solve your problem !

#gallery {
    margin: 0;
    padding: 0;  
    list-style: none;
}

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

#gallery li a p{
    margin: 0;
    padding: 5%;
    color: #bdc3c7;
    font-size: 0.75em;
}
Lindsey Osborne
Lindsey Osborne
1,642 Points
Lindsey Osborne
Lindsey Osborne
1,642 Points

Thank you but that's exactly what I have and it's still displaying the third image on the right hand side :(

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

I've edited your included code a bit to clean up the formatting. Be sure to check out the Markdown Cheatsheet below the text editor for more information!

savan patel
savan patel
2,272 Points
savan patel
savan patel
2,272 Points

its hard to find what's your problem directly

if you send your code to me on savan2k17@gmail.com then i will help you more

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

You and Savan can also work on this by using and sharing a Treehouse Workspace or taking advantage of a service like CopePen.io. This allows others to reference this answer later or chime in if they have thoughts.

As far as the alignment issue goes, be sure to check the width of the images, their container elements, and the margin/padding applied. If all those values add up to more than the width of the parent element, floats and inline displays can get a little weird. Also checking box-sizing and display properties can help.

savan patel
savan patel
2,272 Points
savan patel
savan patel
2,272 Points

ohhh thanks Austin Whipple !

i find codepen is useful website for getting inspiration so thank you

Lindsey Osborne
Lindsey Osborne
1,642 Points
Lindsey Osborne
Lindsey Osborne
1,642 Points

I've sorted it out. My images were slightly different sizes so they were knocking each other out of line when i used float. Thanks all