CSS overflow container with images isn't working?

Question

I am a javascript/PHP programmer brand new to CSS and having some trouble getting images to display in a container with overflow. My understanding is that the below code should display the images in rows of three with 15 pixels of space between them. Instead, it displays one single image in the top left of where the div should be. If I remove the ID for the div the images display down a vertical line, and if I remove the div entirely they flow rightward across the page normally. When I gave the div a background color it appeared to be the proper size and in the proper location.

#items_container {
    position:absolute;
    overflow:auto;
    height:500px;
    width:500px;
}
.item_image {
    margin: 0 15px 15px 0;
    padding: 0 0 0 0;
}

<div id="items_container">
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
</div>

I also tried giving the container div a height/width in the HTML, and the image class a height/width in the CSS. Neither did anything. Thanks for any help, everybody!

Lowkase · Accepted Answer · 2013-03-12 19:57:28Z

1

Not sure I fully understand the question, but this is how I would layout your structure:

http://jsfiddle.net/mDXL2/

HTML

<div id="items_container">
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
    <img src="imageLocation" height="150" width="150" class="item_image" />
</div>

CSS

#items_container {
    overflow:hidden;
    height:500px;
    width:500px;
}
.item_image {
    float:left;
    margin: 0 15px 15px 0;
    padding: 0 0 0 0;
}

The overflow hidden could be replaced by a clear, but I prefer to go the overflow hidden route.

After that you just need to float all of the .item_image elements.

answered Mar 12, 2013 at 19:57

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lowkase Over a year ago

Be sure to accept whichever answer you find most correct/helpful. Cheers.

Collectives™ on Stack Overflow

CSS overflow container with images isn't working?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related