overflow x instead of y

why does it keep putting the image vertically instead of horizontally. look simple but i can't figure it out. please help. thanks

.thumbs_list_container{
      float:inherit;
      height:100px;
      overflow-x:scroll;
      margin-left:5px;
      background-color:#FFFFFF;
      display:inline-block;
      width:210px;
      overflow-y:hidden;
}
.thumb{
      padding:6px;
      padding-left:0px;
      padding-right:1px;
      background:#FFFFFF;
      margin:3px;
      filter:alpha(opacity=50);
      opacity: 0.50;
      -moz-opacity:0.50;
      width:105px;
      display:inline-block;
      overflow-y:hidden;
      height:62px;
      padding-left:12px;
      background:#ffffff;
      cursor:pointer;
}



<div class="thumbs_list_container"/>
    <div id="thumb_0" class="thumb" src="'images/09AmericanRedCross.jpg'"><img width="100" height="60" src="images/09AmericanRedCross.jpg"></div>
    <div id="thumb_1" class="thumb" src="'images/09BlueFish.jpg'"><img width="100"
height="60" src="images/09BlueFish.jpg"></div>
    <div id="thumb_2" class="thumb" src="'images/09DuckRace1.jpg'"><img width="100" height="60" src="images/09DuckRace1.jpg"></div>
    <div id="thumb_3" class="thumb" src="'images/09JanetEvans1.jpg'"><img width="100" height="60" src="images/09JanetEvans1.jpg"></div>
    <div id="thumb_4" class="thumb thumb_selected" src="'images/09JanetEvans1.jpg'"><img width="100" height="60" src="images/09JanetEvans1.jpg"></div>
</div>
StewSupportAsked:
Who is Participating?
 
Tom BeckCommented:
Ok, I get what you are trying to do. You will need to have the images in a container that is wide enough to hold them all horizontally. Then you need to float them all left. Put all of that inside your div with overflow-x:scroll.

B.T.W., "src" is not a valid attribute for a div.

Test code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    .thumbs_list_container{
      float:inherit;
      height:100px;
      overflow-x:scroll;
      margin-left:5px;
      background-color:#FFFFFF;
      display:inline-block;
      width:210px;
      overflow-y:hidden;
    }
    .thumbs_container{
      width:650px;
      height:100px 
    }
    .thumb{
      padding:6px;
      padding-left:0px;
      padding-right:1px;
      background:#FFFFFF;
      margin:3px;
      filter:alpha(opacity=50);
      opacity: 0.50;
      -moz-opacity:0.50;
      width:105px;
      display:inline-block;
      overflow-y:hidden;
      height:62px;
      padding-left:12px;
      background:#ffffff;
      cursor:pointer;
      float:left
}
    </style>
</head>
<body>
<div class="thumbs_list_container">
    <div class="thumbs_container">
        <div id="thumb_0" class="thumb"><img width="100" height="60" src="http://www.aa-fishing.com/gfx/fish-hdr-crappie.gif" /></div>
        <div id="thumb_1" class="thumb"><img width="100" height="60" src="http://static.ddmcdn.com/gif/buffalo-fish-100x60.jpg" /></div>
        <div id="thumb_2" class="thumb"><img width="100" height="60" src="http://www.aa-fishing.com/gfx/fish-hdr-steelhead.gif" /></div>
        <div id="thumb_3" class="thumb"><img width="100" height="60" src="http://www.whoi.edu/cms/images/fish_kills_100_47911.jpg" /></div>
        <div id="thumb_4" class="thumb thumb_selected"><img width="100" height="60" src="http://www.mcwdn.org/Animals/fisheatCLR.gif" /></div>
    </div>
</div>
</body>
</html>

Open in new window

0
 
Tom BeckCommented:
I think you misunderstand the use of overflow in css. It is meant to tell the browser what to do with content that does not fit in the container. It has nothing to do with the orientation of your image. They will be whatever orientation the original is to start with.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Can you post a link to the page you're referring to? Is the image rotated the wrong way?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
StewSupportAuthor Commented:
@xmediaman, just copy and paste the code above and change it to any image you want on your machine and save it as html file.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
There are several errors in your html that may be handled differently by different browsers. But this code produces a wide, vertically oriented, image in Firefox, Chrome, and IE7. I must assume that your own page has more to it which may be interfering with this code. I'm also assuming that you mean a wider-than-tall image when you say it's not putting the image "horizontally."

The errors I mentioned, though I don't believe they are related to the problem, are:

In the code above, the line <div class="thumbs_list_container"/> is a self-terminating div because it ends with a />. Some browsers could interpret the divs that follow as sibling divs rather than child divs.

There is no src attribute for div elements.
0
 
StewSupportAuthor Commented:
thank you that was good
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.