how to make div grow right instead of down - html

Question

How can I make a div like this grow to the right instead of down? I want a constant height of my image list, and I want a scrollbar for horizontal scrolling as needed.
http://jsfiddle.net/8J2KM/
<div style="width:700px;height:130px;overflow-x:auto;">
<div style="height:130px;overflow:hidden;">
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/8.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/9.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/10.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/11.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />
test1
</div>
</a>
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;border:solid 3px transparent;padding:3px;color:black;font-weight:bold;">
<img src="/cloudsign/web/images/layoutTemplate/13.png" alt="test1" style="border:solid 3px black;padding:3px;width:130px;height:73px;" />
<br />
test1
</div>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/14.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />
test1
</div>
</a>
<a href="javascript:void();">
<div style="width:auto;height:100px;display:inline-block;margin-right:10px;color:#888;">
<img src="/cloudsign/web/images/layoutTemplate/15.png" alt="test1" style="border:solid 0px transparent;padding:9px 0px;width:130px;height:73px;" />
<br />
test1
</div>
</a>
</div>
</div>
</div>

Answer 1

You can either increase the size of the wrapping div to like 300% or how much u need or just add white-space:nowrap to the wrapping div and specify overflow-x:scroll for the inner wrapping div. You don't need overflow:auto in the outermost div.
So the first two divs :
<div style="width:700px;height:135px;white-space:nowrap">
<div style="height:135px;overflow-x:scroll;">
JSFiddle : http://jsfiddle.net/LnApB/
Also modify the height of these two divs to fit the height of the image+caption.
Of course as others have already pointed out tidy up your html, put your styles to separate style sheet to improve readability and maintainability.

Answer 2

Ok, lets tidy this up a little!
HTML:
<div id="container">
<a href="javascript:void();"> <!-- Have as many as you want. Copy -> paste. -->
<div class="block">
<img src="/cloudsign/web/images/layoutTemplate/15.png" alt="test1" />
<br />test1
</div>
</a>
</div>
CSS:
#container {
width: 100%;
overflow: auto;
height: 150px;
white-space:nowrap;
}
.block {
width:auto;
height:100px;
display:inline-block;
margin-right:10px;
color:#888;
}
img {
border:solid 0px transparent;
padding:9px 0px;
width:130px;
height:73px;
}
DEMO HERE
This includes a fix, take a look and work out were you went wrong. Please try to NOT put your CSS in with HTML. It will just make life harder for yourself, use classes .testClass or id's #testID
Hope this helps you.

Answer 3

In order to keep the item divs 'growing right', you need to define the width of the parent container to the largest width it will be inclusive of its contents (i.e. the total width of all child items).
There are a number of possible approaches, look at this fiddle for options.
As an aside, separating out your styles so they aren't inline is recommended, aside from leading to a far increased ability to maintain and control your code, it is much more efficient.

Answer 4

<div style="width:300px;overflow:auto;">
</div>
put your code inside this div
i updated jsfiddle here check it.
http://jsfiddle.net/8J2KM/2/

Answer 5

Remove <br/> in your html then it will grow horizontally.i have changed the js fiddle.Have a look.
DEMO HERE