1

I am trying to have a selection area at the top of the window where several different page links exist. This will include so many links that each page will have an image. They will not fit into the width of the page, so I would like them to display on one row and have a scrollbar to the right so that users can scroll through a horizontal list and click whichever link of a page a user would like to view. When users click the link it ought to appear in the content area below the selection area. Please refer to the image for a visual reference.

enter image description here

<div style="max-width: 680px; max-height: 200px; white-space: nowrap; overflow: AUTO;">
    <div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">         
        <center>Ford Thunderbird Gallery</center>
        <a href="index.php?option=com_content&amp;id=127&amp;tmpl=component&amp;TB_iframe=true&amp;height=680&amp;width=680" target="gallery">      
            <img src="images/InstallationGallery/FordThunderbird/IMG_0016.png" width="200" >        
        </a>
    </div>  
    <div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">         
        <center>2012 Ford Expedition Gallery</center>       
        <a href="index.php?option=com_content&amp;id=128&amp;tmpl=component&amp;TB_iframe=true&amp;height=680&amp;width=680" target="gallery">      
            <img src="images/InstallationGallery/2012Expedition/P1040672.jpg" width="200" >         
        </a>
    </div> 
</div> 
<iframe height="680" name="gallery" scrolling="no" width="680"></iframe>
jwheron
  • 2,553
  • 2
  • 30
  • 40
Timmer1992
  • 31
  • 2
  • 4
  • it's not very clear what the problem / question is... – ptriek Dec 02 '11 at 16:47
  • It seems that if i set the first div to have the set width of 680px and then have a child div under that with a larger width it will work, the thing is i have to manually set the width to a large number say 20000px; when i do that it creates a giant scoll bar if i do max-width of 20000 it starts wrapping the divs again... – Timmer1992 Dec 02 '11 at 16:48
  • In other words i would like to create a bar that scrolls from left to right only with multiple divs in it that are all in the same row the divs have a set width and height of 200px each – Timmer1992 Dec 02 '11 at 16:50

1 Answers1

5

Try working with display:table(-row)(-cell) instead of floating:

http://jsfiddle.net/DxZbV/1/

Oh and also try not to use inline styles - makes your code pretty messy and hard to handle...

ptriek
  • 9,040
  • 5
  • 31
  • 29
  • This worked great thank you, i know not to use inline, but thanks for the help, since i am using joomla inline is best for testing when i completed the project i then move to external style sheet. Thanks for the help, now to figure out why joomla wont load some of the images. xD – Timmer1992 Dec 02 '11 at 17:59