daphna
07-02-2007, 05:34 PM
hi. i am trying to create a layout for an image gallery. there are two divs in a container, both float:left. the left one has a fixed size and displays the large image and the right displays thumbs. i would like the right div to be scrollable when the content is longer that the browser window, but i want the scrollbar only on the thumbs div, without affecting the rest of the page. i manage to do this only when i give the left div a specific height and overflow:auto but i want it to be flexible to different window sizes and resolutions. the way it is now, when the window is too small the scroll bar appears on the entire content. help? please? thanks.
this is what the code looks like:
STYLE
<style type="text/css">
#containerbig { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(images/blackbg.png) repeat; z-index: 3; overflow: auto; }
#beelden { position: relative; width: 650px; margin: 70px auto; }
#closebox { float: right; }
#image { float: left; width: 470px; height: 450px; font-size: 90%; text-align: left; color: #fff; }
#image img { float: left; padding: 0 10px 4px 0; }
#next { float: right; margin-top: 90%; }
#next img { padding: 0; }
#thumbs { width: 150px; height: 100%; overflow: auto; float: left; }
#thumbs li { padding: 10px; }
li#one { padding-top: 0; }
</style>
HTML:
<body>
<div id="containerbig">
<div id="beelden">
<div id="closebox"><a href="beelden.html"><img src="images/closebox.gif" alt="close" /></a></div>
<div id="image">
<div id="next"><a href="image2.html"><img src="images/next.gif" alt="next" /></a></div>
<a href="beelden.html"><img src="images/image1.jpg" alt=""/></a>
<h4>title</h4><p>Formaat: Ø 30 cm</p><p>Materiaal: aluminium</p><p>blablabla text about the image</p></div>
<div id="thumbs">
<ul>
<li id="one"><img src="thumbs/image1.jpg"/></li>
<li id="two"><a href="image2.html" <img src="thumbs/image2.jpg"/></a></li>
<li id="three"><a href="image3.html" <img src="thumbs/image3.jpg"/></a></li>
<li id="four"><a href="image4.html" <img src="thumbs/image4.jpg"/></a></li>
<li id="five"><a href="image5.html" <img src="thumbs/image5.jpg"/></a></li>
<li id="six"><a href="image6.html" <img src="thumbs/image6.jpg"/></a></li>
</ul></div>
</div>
</div>
</body>
i've highlighted the things i'm not sure about but i am really a css beginner so i would appreciate any help, thanks
this is what the code looks like:
STYLE
<style type="text/css">
#containerbig { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(images/blackbg.png) repeat; z-index: 3; overflow: auto; }
#beelden { position: relative; width: 650px; margin: 70px auto; }
#closebox { float: right; }
#image { float: left; width: 470px; height: 450px; font-size: 90%; text-align: left; color: #fff; }
#image img { float: left; padding: 0 10px 4px 0; }
#next { float: right; margin-top: 90%; }
#next img { padding: 0; }
#thumbs { width: 150px; height: 100%; overflow: auto; float: left; }
#thumbs li { padding: 10px; }
li#one { padding-top: 0; }
</style>
HTML:
<body>
<div id="containerbig">
<div id="beelden">
<div id="closebox"><a href="beelden.html"><img src="images/closebox.gif" alt="close" /></a></div>
<div id="image">
<div id="next"><a href="image2.html"><img src="images/next.gif" alt="next" /></a></div>
<a href="beelden.html"><img src="images/image1.jpg" alt=""/></a>
<h4>title</h4><p>Formaat: Ø 30 cm</p><p>Materiaal: aluminium</p><p>blablabla text about the image</p></div>
<div id="thumbs">
<ul>
<li id="one"><img src="thumbs/image1.jpg"/></li>
<li id="two"><a href="image2.html" <img src="thumbs/image2.jpg"/></a></li>
<li id="three"><a href="image3.html" <img src="thumbs/image3.jpg"/></a></li>
<li id="four"><a href="image4.html" <img src="thumbs/image4.jpg"/></a></li>
<li id="five"><a href="image5.html" <img src="thumbs/image5.jpg"/></a></li>
<li id="six"><a href="image6.html" <img src="thumbs/image6.jpg"/></a></li>
</ul></div>
</div>
</div>
</body>
i've highlighted the things i'm not sure about but i am really a css beginner so i would appreciate any help, thanks