PDA

Click to See Complete Forum and Search --> : Div overflow

elmu
03-26-2008, 12:54 PM
Hello,

I have a div where I want to display images. What I want is that if there are too many images then a horizontal scrollbar appears and so I can see all images.

Unfortunately with my current CSS code the images are ordered into more rows if the div size gets bigger than the parent div.

How can I put them into a single row?

This is my css code for the div
#list{
height:120px;
overflow:auto;
text-align:center;
}

Thanks!
KDLA
03-26-2008, 02:46 PM
This will get you started:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#hold {width: 500px; overflow:scroll; height: 120px;}
#hold ul {white-space: nowrap;}
#hold li {display: inline; padding: 0 15px;}
</style>
</head>

<body>
<div id="hold">
<ul><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li><li>image</li>
</ul>
</div>
</body>
</html>