wrap images in a div

Question

I'm using the following CSS to display images side by side:

#gallery {
 background-color: #444;
 padding: 10px;
 width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
 border: 5px solid #3e3e3e;
 border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
 border: 5px solid #fff;
 border-width: 5px 5px 20px;
 color: #fff;
}
#gallery ul a:hover { color: #fff; }

html code for above css is:

<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="">
                <img src="photos/thumb_image1.jpg"/>
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="">
                <img src="photos/thumb_image2.jpg">
            </a>
        </li>
</div>

All works fine, but there might be cases when I will be displaying 20 to 30 images which makes the page very long. Is there a way to add all this in side something so that the whole page doesnt become big and a scroll bar is added around the container that contains all the images?

Answer 1

not sure why you don't want your page to become "long" but you can give the div a specific height and set its overflow to auto, so that the div scrolls while the page remains "short".

Answer 2

1. Don't do it. Just let the page be long and make sure you put the interesting stuff at the top. My browser has a scrollbar and I prefer to use it.

2. If you must... this is acceptable.