Horizontal Scrolling Area

Markdidj · July 20, 2012, 2:09pm

Is it possible to have a block element go wider than its parent only horizontaly?

I have an area that is 448px wide. Inside that I have an unknown number of images that have variable widths.

I’d like the images to stay on a single line, getting placed to the right of the previous, and a horizontal scrollbar to appear if the images overflow the area.

I could use a table, putting each image into its own cell. This will force the table to go larger than its parent on the horizontal making a scrollbar appear.

Can I do the same without tables?

Many Thanks

Mikl · July 20, 2012, 2:30pm

[FONT=verdana]If I’ve understood this right, you need to add a min-width attribute to the container. If the actual contents are wider than the figure you specify, the horizontal scrollbar will appear.

Mike[/FONT]

ralphm · July 20, 2012, 2:49pm

You could try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">
.container {width: 448px; height: 120px; overflow: auto; background :#e7e7e7; margin: 0 auto; position: relative;}
.container-inner {width: 1600px; top: 0; left: 0; height: 100px; padding: 10px 0; position: absolute;}
.box {display: inline-block; width: 100px; height: 100px; background: #c7c7c7;}
</style>
	
</head>

<body>

<div class="container">
<div class="container-inner">
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
</div>
</div>

</body>
</html>

Markdidj · July 20, 2012, 3:42pm

Thanks Ralph, that’s what I’m looking for but I only want the horizontal scrollbar to appear if the images don’t fit.
Mikl, min-width didn’t work, unless I’m doing it wrong.

I don’t like using tables for layout, but at the moment I can’t see any other way round it. If I don’t set a large width container the contained divs fall below and I get the vertical scrollbar.

PaulOB · July 20, 2012, 7:29pm

Hi,

You can do it like this quite easily.


<!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">
.wrap {
	overflow:auto;
	width:600px;
	height:220px;
	white-space:nowrap;
	margin:0;
	padding:10px;
	list-style:none;
}
.wrap li {
	width:200px;
	height:200px;
	margin:0 10px;
	background:red;
	display:inline-block;
vertical-align:top;
 *display:inline;/*ie6/7 fix*/
	zoom:1.0;/*ie6/7 fix*/
}
</style>
</head>
<body>
<ul class="wrap">
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
		<li>test</li>
</ul>
</body>
</html>

PaulOB · July 20, 2012, 7:38pm

Or if you don’t like inline-block you can use floats but needs one extra wraper.


<!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">
.wrap {
	overflow:auto;
	width:600px;
	height:220px;
	padding:10px;
}
.inner {
	float:left;
	margin:0 -32767px 0 0;/* browser limit */
}
.inner div {
	width:200px;
	height:200px;
	margin:0 10px;
	background:red;
	float:left;
}
</style>
</head>
<body>
<div class="wrap">
		<div class="inner">
				<div>test</div>
				<div>test</div>
				<div>test</div>
				<div>test</div>
				<div>test</div>
				<div>test</div>
		</div>
</div>
</body>
</html>

Both of the above will only produce a scrollbar when needed and can contain unlimited images within browser limits.

Rayzur · July 20, 2012, 7:58pm

Hi Paul,

I meant to point out in this recent thread that a vertical-align value of top or bottom on an inline child of an overflow parent causes a bug in Opera.
I had done some more testing in that thread after I had posted and realized that the bug was not present because it was using the default of baseline.

In your first test case the vertical-align;top; causes the overlow auto/scroll scrollbar to disappear in Opera. I’m still using version 11.01 but I suspect the bug is still present in newer versions.

Rayzur · July 20, 2012, 8:16pm

We can use text-top or text-bottom as a workaround for the Opera bug, though not exactly the same as top/bottom they have always been the next best thing for me to use as an Opera fix. There are no problems with middle and baseline.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scroller Node Fix</title>
<script type="text/javascript">

</script>

<style type="text/css">
#scroller {
    width:300px;
    overflow-x:scroll;
    list-style:none;
    margin:0 auto;
    padding:0 0 0 1px;
    white-space:nowrap;
    word-spacing:-1em;
    background:#000;
}
#scroller li {
    display:inline-block;
    border-right:1px solid red;
    padding:1.5em .5em;
    vertical-align:middle; /*"top" or "bottom" causes scrolling bug in opera*/
    /* We can use "text-top" or "text-bottom" as a workaround for the Opera bug*/
    word-spacing:0;
    background:#0f0;
}
#scroller li:nth-child(odd) {padding:2.5em .5em;}
*+html #scroller li { display:inline;} /*IE7*/

</style>

</head>
<body>
<ul id="scroller">
    <li>Scroller Node Fix</li>
    <li>inline-block</li>
    <li>inline-block</li>
    <li>inline-block</li>
    <li>Last Scroll Block</li>
</ul>
</body>
</html>

PaulOB · July 20, 2012, 8:17pm

Hi Ray,

I’m not seeing the bug in Opera 12 so its probably been fixed (unless I’m looking at the wrong thing :))

Rayzur · July 20, 2012, 8:28pm

They must have fixed it then, that’s good to see

Here is what I was seeing in 11.01, notice that with overflow:scroll; the scrollbox is present but the scroller is gone.

EDIT:
I’ll have to install version 12 and see if this old v-align bug has been fixed as well.

Webas · July 20, 2012, 9:01pm

if you are doing it with images then try jquery :
http://valums.com/files/2009/menu/final.htm

It is very responsive to mouse so it might be practical…

Markdidj · July 20, 2012, 9:16pm

Wow! Some great replies, and fast! Thanks Paul and Rayzur.

Paul, when you say within browser limits, are you saying the list items will drop to another row when the image areas are greater than the screen width or viewport?

It’s for an image picker, that reads the image folder and displays thumbnails and allows drag & drop to content editable area. The contents of the container, the images, change when a dropdown showing the folder is changed. There could be a lot of images in the folder, all of unknown width. They also have text with them (the file name placed underneath) which may be wider than the image making its parent wider, so I can’t add the widths server side, which was one idea.

If they drop when the size is larger than viewport or screen width then I think I’ll probably go with tables. It gives me more flexibilty, and I can get round the no-scrollbar browsers.

Edit: Thanks Webas but it has to be a noscript method first. Then I enhance. I don’t use jquery. Had no use for it yet.

PaulOB · July 21, 2012, 7:36am

Hi Mark,

No I’m saying that browsers have px limits and you can’t just add extremely large numbers (opera especially) . In the floated example opera’s horizontal scroll limit used to be 32767px (as well as its top margin limit) but that seems to have increased in the latest version. However 32767px should be large enough for all your images and if you have more than that then I would consider a different approach as they will be scrolling forever.

The display:inline-block method has no such limit and there is no benefit in using a table over this method and indeed a table requires more code anyway. See Rays example for the old opera fix and whitespace fix.

PaulOB · July 21, 2012, 7:44am

That bug seems to be still in place. Have you filed an Opera bug or Simon will be cross

My original example above is also working in Opera 11.61 on my mac computer so must have been fixed a while ago.

Markdidj · July 21, 2012, 8:27am

Ah ha! Thanks Paul. If there’s anyone that would nail it it would be you! As I was writing an earlier reply I realised that I would need an image count to allow a max number to be shown just in case a folder has a huge number of images. And thinking of it some more I may be better off storing the image names of files that get uploaded into a text file or database. It will make it easier to show the images in list of n to [I]n+max_image_count.

Many Thanks[/I]

Markdidj · July 21, 2012, 12:48pm

Worked a treat Paul and Ray. Didn’t mind position:relative added to the li either. The select box that the li also contains (for non drag-drop) is positioned absolutely to the left top, above the image. So, I think I am right in saying the parent needs to be positioned relatively for it to work. Added and everything is in the correct place! Cheers

Topic		Replies	Views
Need css help to develop horizontal website HTML & CSS	4	650	October 8, 2014
How to get a horizontal scrollbar? HTML & CSS	5	527	August 25, 2010
Full width div + full width responsive image causing horizontal scroll HTML & CSS	10	16115	June 11, 2018
Image overflowing parent div HTML & CSS	3	2796	August 31, 2015
Show horizontal scroll not vertical on div? HTML & CSS	3	578	February 28, 2010

Horizontal Scrolling Area

Related topics