Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Floating 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
PLUS
Caroline Hagan
Courses Plus Student 12,453 Points

Hi Koby Woodman can you put your complete code into a Codepen.io so we can see a working demo online?

Yngve Molnes
Yngve Molnes
5,637 Points

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

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

Normally 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
Caroline Hagan
Courses Plus Student 12,453 Points

I 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 ...?

I'm doing it on my laptop with Dreamweaver, not sure why that would be any different...

Caroline Hagan
Caroline Hagan
Courses Plus Student 12,453 Points

Me either; the Codepen would display the same as on your computer if the code is identical in theory :-/

Hi 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
Yngve Molnes
5,637 Points

If 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/