CODEWITHSUNDEEP
htmlcss
yaakov
yaakov

Reputation: 4665

images not hiding with overflow:hidden

I am making a slideshow with jQuery, and I have several images that are supposed to slide in one at a time. I am using a div with a width the same as the width of the images: 80 pixels. I used white-space:no-wrap and overflow:hidden, but they aren't making one image outside the div, and one inside. The images are still right next to each other.
HTML:

<div>
<img src="http://k44.kn3.net/3EADB8415.jpg">
<img src="http://slodive.com/wp-content/uploads/2012/10/yorkie-poo-pictures/cute-yorkie-poo-picture.jpg">
</div>

CSS:

img{
    width:80px;
    border:1px solid gold;
}
div{
    width:80px
    white-space:no-wrap;
    overflow:hidden;
}

FIDDLE

Upvotes: 0

Views: 159

Answers (2)

Anuj
Anuj

Reputation: 1474

You are missing a semicolon after your CSS width statement. Add it in, and the CSS will be valid, and hide the image

div{
    width:80px            <-- Missing semicolon!
    white-space:no-wrap;
    overflow:hidden;
}

Upvotes: 1

somethinghere
somethinghere

Reputation: 17350

If you don't set height or positioning, your box will resize itself autmatically. Try the following:

div {
    width: 80px;
    height: 80px;
    white-space:no-wrap;
    overflow:hidden;
}

This will make your box have all the requirements to have an actual size, and will make overflow hiding possible.

(Also, as everyone mentioned, you need the semicolon - without it it won't work either, but if you don't add the height you will still see a bit of the other image).

Upvotes: 1

Related Questions