Welcome to WebmasterWorld Guest from 35.175.191.168

Forum Moderators: not2easy

Message Too Old, No Replies

Overflow horizontal?

     
11:35 am on Apr 7, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 7, 2004
posts:89
votes: 0


I have a <div> on my page which I have specified overflow:auto This makes vertical scroll bars appear when there is too much content to fit into the <div>

Is there anyway I can get horizontal scrollbars to appear instead of vertical?

This way I would scroll left to right to view the content instead of scrolling top to bottom.

-Harvs-

12:12 pm on Apr 7, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 8, 2002
posts:2335
votes: 0


If it's too wide you get horizontal, if it's too tall you get vertical. At least that's how it works for me...
12:31 pm on Apr 7, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 7, 2004
posts:89
votes: 0


Thanks for the replay Clark.

If I have a single element (image) that is too wide to be displayed the horizontal scrollbars will be displayed as you described.

The problem is I have a series of small images (a gallery) that needs to be displayed. So when there are too many images to fit in the <div> I want the overflow to display with a horizontal scrollbar instead of the normal vertical scrollbar.

Hope this makes sense....

-Harvs-

2:28 pm on Apr 7, 2006 (gmt 0)

New User

10+ Year Member

joined:Apr 6, 2006
posts:8
votes: 0


Use

white-space: nowrap;

in the style. Make sure you have enough height to include the scroll bar height or else you'll get the vertical scroll bar too.

#scrollwide {
height: 50px;
overflow: auto;
white-space: nowrap;
}

<div id="scrollwide">
<img src="/images/i1.gif" width="50" height="32"><img src="/images/2.gif" width="50" height="32"><img src="/images/3.gif" alt="It's free!." width="50" height="32"><img src="/images/4.gif" width="50" height="32"><img src="/images/5.gif" width="50" height="32">
</div>

10:52 pm on Apr 7, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 7, 2004
posts:89
votes: 0


Thanks abulafia that works exactly the way I needed it to.