Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member TheGardener's Avatar
    Join Date
    Jun 2006
    Posts
    62
    Member #
    13332
    My revised image gallery (http://www.imagegardenphoto.com/home.php?id=gallery2) is almost complete, but I need to figure out how to make the scrolling div vary in width with its contents. Below is the code used to create the scrolling div:

    Code:
    #thumbFrameWrapper {
        height: 125px;
        width: 508px;
        overflow: auto;
    }
    
    #thumbFrame {
        color: black;
        height: 106px;
        width: 3000px;
        text-align: left;
        background-color: white;
    }
    
    
    
    <div id="thumbFrameWrapper">
                            
        <div id="thumbFrame">                                            
                                                            
        </div>
                            
    </div>
    The thumbframewrapper is needed to make the div scroll horizontally only, but there are a few problems. If the width of the inner div is not set to a specific number (3000 px in this case) the div will scroll vertically down instead of horizontally. But I can't just set a static width, because I have four galleries of different sizes, and I'll be adding and removing items from the galleries frequently. Try switching between galleries, and you'll see that most of them can't fill the available space while Editorial overflows into a second row of images.

    Does anyone know an easy way to make the internal div have a varying width? There's probably some hideously complex way to do it that involves using a Java graphical library function to sum the widths of the images and then pass the resulting number to Javascript that will write the div tag accordingly, but I don't want to go there.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    white-space: nowrap; seems to do the trick.

  4. #3
    Member TheGardener's Avatar
    Join Date
    Jun 2006
    Posts
    62
    Member #
    13332
    Wow. You've done it again. That one line of code, which no amount of searching on Google, WDF or W3Schools could turn up, has made my HTML headache go away. Thanks.

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, I found it on Google :-) I think the longer you hunt for these, the better you know what terms to search for and what order to put them in in Google...


Remove Ads

Posting Permissions

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

Search tags for this page

coding divs to scroll sideways
,
create horizontal scrolling div
,

horizontal scrolling variable width

,
how to have variable div with scrolling
,
how to make inner div vertical scrollable
,
how to make scrollable div tag vertically with the page
,
make a div scrollable horizontally only
,
make div horizontally scrollable
,
make inner div scroll
,
variable width scroll left container
Click on a term to search for related topics.
All times are GMT -6. The time now is 03:03 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com