WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] How to force div to Horizontal Scroll?

Reply
  Thread Tools Display Modes
Old 24th March 10, 01:13 AM   #1
cyclotron
WLC Member
 
cyclotron's Avatar
 
Join Date: Jan 2007
Posts: 23
Default How to force div to Horizontal Scroll?

Is there any way to force a div to scroll horizontally using just CSS? white-space:nowrap; doesn't seem to work.

http://tfcdesign.com/demos/random-ad.php
cyclotron is offline   Reply With Quote
Old 24th March 10, 02:26 AM   #2
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: How to force div to Horizontal Scroll?

Yes, have a look here and then view the source code for the details.

Side Scrolling Gallery

It works because of the floated inner div with a large negative right margin.
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 24th March 10, 03:28 AM   #3
cyclotron
WLC Member
 
cyclotron's Avatar
 
Join Date: Jan 2007
Posts: 23
Default Re: How to force div to Horizontal Scroll?

Nice. The only hiccup for me is that the nested div "wrapper" will not be a fixed width. The number of iframes within the wrapper will change over time.

Thanks.
cyclotron is offline   Reply With Quote
Old 24th March 10, 05:36 AM   #4
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: How to force div to Horizontal Scroll?

You don't have to set a width on that inner div, that was just for the demo. It can be controlled with width, min-max widths, or no width on the outer wrapper.

It can even be done as a Full Screen Scroller

Try this -
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side Scrolling Gallery</title>
<style type="text/css">

body {
    margin:0;
    padding:0;
}
h2 {
    text-align:center;
    margin:0;
    padding:0 0 10px;
    border-bottom:1px solid #000;
 }
#wrapper {
    width:80%;
    min-width:600px;
    max-width:900px;
    margin:30px auto;
    border:1px solid #000;
    background:#CCC;
    padding:10px 0 0;
}
#slide-wrap {
    height:236px;
    overflow:auto;
    background:#EEF;
    padding:0 20px; 
}
#inner-wrap {
    float:left;
    margin-right:-32767px;/*Be safe with Opera's limited neg margin of -32767px*/
}
img { /*For simulating images in Demo only for FF, remove this in working layout*/
    float:left;
    width:200px;
    height:200px;
    background:#444;
    color:#FFF;
    margin:10px 20px 0 0;
}

</style>
</head>
<body>

<div id="wrapper">
<h2>"Side Scrolling Gallery"</h2>
    <div id="slide-wrap">
        <div id="inner-wrap"> 
            <img src="images/img1.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image">
            <img src="images/img1.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image"> 
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image">  
        </div>
    </div>
</div>
</body>
</html>
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 24th March 10, 07:33 AM   #5
cyclotron
WLC Member
 
cyclotron's Avatar
 
Join Date: Jan 2007
Posts: 23
Default Re: How to force div to Horizontal Scroll?

These are extremely helpful. Thank you. BTW the Opera-safe value is different in each example.
cyclotron is offline   Reply With Quote
Old 24th March 10, 08:10 AM   #6
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: How to force div to Horizontal Scroll?

Quote:
Originally Posted by cyclotron View Post
BTW the Opera-safe value is different in each example.
Yeah, the live page has it set slightly lower than what the actual limit is. I was unsure at the time the code was written.

The code I just posted above is correct with -32767px

If you add 1px to it and make it -32768px it will break Opera

Here is a test case you can view in Opera, then add 1px to it to see it break.

HTML Code:
<!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>
* {
    margin:0;
    padding:0
}
#test {
    height:32867px;
    margin-top:-32767px;/* -32768px breaks opera*/
    width:100px;
    background:lime;
}
p {padding-top:32767px}
</style>
</head>
<body>
<div id="test"><p>Opera scroll limit test</p></div>
</body>
</html>
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:08 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.