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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
StewSupportAuthor Commented:
thank you that was good
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.