CODEWITHSUNDEEP
htmlcssimageoverflow
Mr. Lavalamp
Mr. Lavalamp

Reputation: 1888

CSS overflow container with images isn't working?

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!

Upvotes: 0

Views: 459

Answers (1)

Lowkase
Lowkase

Reputation: 5699

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.

Upvotes: 1

Related Questions