www.webdeveloper.com
Results 1 to 4 of 4

Thread: Horizontal Scrolling <div>

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    Horizontal Scrolling <div>

    Hi,

    How can I create a row of images with a horizontal scrollbar?


    I'd be really grateful to your help!

    Regards
    Rain Lover

  2. #2
    Join Date
    Mar 2010
    Location
    Belgium
    Posts
    17
    Just make sure the div is wider than the screen width?

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there Rain Lover,

    here is an example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>horizontally scrolling box</title>
    
    <style type="text/css">
    body {
        background-color:#555;
     }
    #container {
        width:850px;
        height:216px;
        border-style:solid;
        border-width:5px;
        border-color:#333 #777 #777 #333;;
        margin:100px auto 0;
        overflow:auto;
     }
    #content {
        width:1680px;
        padding:10px 0 10px 10px;
        height:180px;
        background-color:#fff;
     }
    #content img {
        float:left;
        width:198px;
        height:178px;
        border:1px solid #000;
        margin-right:10px;
        background-color:#ccc;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="content">
     <img src="apple.jpg" alt="">
     <img src="apple.jpg" alt="">
     <img src="apple.jpg" alt="">
     <img src="apple.jpg" alt="">
     <img src="apple.jpg" alt="">
     <img src="apple.jpg" alt="">
     <img src="apple.jpg" alt="">
     <img src="apple.jpg" alt="">
    </div>
    
    </div><!--end #container -->
    
    </body>
    </html>
    
    coothead

  4. #4
    Join Date
    Mar 2010
    Posts
    42
    set a width on the container then use overflow-x for the scrollbar

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles