Image overflowing parent div

Hi all,

I’ve been lurking/reading for a few days and this seems like a great community. I just started learning web development a few weeks ago and have started to design my first site. Really enjoying it, but I’ve run into a bit of a problem with my images overflowing their parent div (hopefully that’s correct terminology).

So far I have a basic navigation section and then a div that holds my content, which I plan on being a few images and some text. The problem is with the images. Currently there are 6 images, which are in 3 columns and 2 rows initially. They move around as I expect them to when I decrease the browser width, until they get to 1 column and 6 rows. At this point, when I decrease the browser width down enough, I reach a point (At 429px wide to be exact) where I get a scrollbar because the images don’t scale down and are too wide (See picture 2), and then when I decrease the size even further it looks like my images are going outside the parent div as the far right ends up in white space, and is not inside the green that I have set as the background color for the div (See picture 3).

I noticed that if I shrink my browser width down as far as it will go and open inspector, the images div is 286px wide, but the images themselves are 287px wide. I assume this is the problem, or at least the result of the problem. I’m sure this is something simple, but I have no clue what I’m doing wrong or how to fix it.

Thank you for any help.

Below is the code for this section.

HTML

          <div id="content"> 
             <div class="images"> 
                <img src="img/img7.jpg"> 
                <img src="img/img7.jpg"> 
                <img src="img/img7.jpg"> 
                <img src="img/img7.jpg"> 
                <img src="img/img7.jpg"> 
                <img src="img/img7.jpg"> 
            </div>
          </div>

CSS

#content {
  background-color: #17d400;
  background-image: linear-gradient(#17d400, #00E58E);
  text-align: center;}
    
.images img {
  margin: 2% 2% 0 2%;
  max-width: 100%;}

This images I’m using on the site are just solid color jpg’s that I created in GIMP for testing purposes. They are 400 x 400.

Pictures are all easier to see if you open in a new tab.

Picture 1. Everything is fine here. No scrollbar, and the margin is as I expect.

Picture 2. Scrollbar appears (I moved it far right), the margin on the right has shrunk (hard to see in this picture) and white space on the right side.

Picture 3. Scrollbar far right and images are outside the background.

http://codepen.io/ryanreese09/pen/qdRJVj

Does something like this work as you wish? It’s probably easier to move the spacing to the parent and just have the padding be the horizontal separator. If you want vertical spacing between the images, you can put back a bottom margin (or top).

1 Like

Ryan,

That did indeed fix things the way I was hoping. Thank you very much for your help and quick reply.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.