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 trialLindsey Osborne
1,642 PointsFloated 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
2,272 Pointshey 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;
}
savan patel
2,272 Pointsits 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
29,725 PointsYou 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
2,272 Pointsohhh thanks Austin Whipple !
i find codepen is useful website for getting inspiration so thank you
Lindsey Osborne
1,642 PointsI'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
Lindsey Osborne
1,642 PointsLindsey Osborne
1,642 PointsThank you but that's exactly what I have and it's still displaying the third image on the right hand side :(
Austin Whipple
29,725 PointsAustin Whipple
29,725 PointsI'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!