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
kobywoodman
1,426 PointsFloating images leaves gaps in image grid
Hi there, From the lesson on floating images as part of the CSS course to making a website, does anyone have any idea why my images might have some gaps in the grid that they form given the following?
For my general CSS, I have (I've kept only what I think is relevant to the issue but I could be wrong!)_: #wrapper { max-width:940px; margin: 0 auto; padding: 0 5% }
img{
max-width: 100%;
}
The page styling I've defined as shown in the video is:
gallery {
margin: 0;
padding: 0;
list-style: none;
}
gallery li{
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
7 Answers
Caroline Hagan
12,612 PointsHi Koby Woodman can you put your complete code into a Codepen.io so we can see a working demo online?
Yngve Molnes
5,637 PointsMight be caused by you using percentages to define width and margin. I think you should set the margin to a number of pixels instead of percent and use margin-left:auto; and margin-right:auto; to center gallery. Havent looked into the track you are on yet though, got treehouse subscription today.
kobywoodman
1,426 PointsThanks for replying so quickly! I'm afraid this is all very new to me but let me try and respond.
Hi Caroline - I've put it on Codepen.io as suggested (called "Floating images leaves gaps") but oddly, I don't see the same problem in the viewer on that site?!!!
Hi Yngve - I'm using percentages as suggested in the video to keep it dynamic so it's more suitable across devices, with a view to making it more suitable for desktops further on in the lessons.
Caroline Hagan
12,612 PointsKoby can you post the link to the Codepen here?
kobywoodman
1,426 Points
kobywoodman
1,426 PointsNormally Lounge area 2 would be where kitchen is, leaving its current position blank and shifting everything along one place. The same happens with the spot before the Floor plan being blank.
Caroline Hagan
12,612 PointsI had to pop in some images to see what you meant - can't see any issue on the Codepen : http://codepen.io/blueocto/pen/FvntI Are you doing your coding on Workspace, or your computer, or ...?
kobywoodman
1,426 PointsI'm doing it on my laptop with Dreamweaver, not sure why that would be any different...
Caroline Hagan
12,612 PointsMe either; the Codepen would display the same as on your computer if the code is identical in theory :-/
kobywoodman
1,426 PointsHi all,
Just wanted to say a quick thanks to those who offered answers to this. I just found out an issue I had was that my image sizes were not perfectly uniform - I've standardised them and the issue is gone so I guess it was causing the images to wrap in an imperfect manner.
Thanks again!
Yngve Molnes
5,637 PointsIf you are using photoshop you can automate the process of re-sizing images to the right size. If you find it interesting, click the link below, simple tutorial :) http://digital-photography-school.com/how-to-batch-resize-in-photoshop/