CODEWITHSUNDEEP
htmlcssoverflowhorizontal-scrollingexpand
Matt Welander
Matt Welander

Reputation: 8548

how to make div grow right instead of down

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>

Upvotes: 1

Views: 4357

Answers (5)

SW4
SW4

Reputation: 71160

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.

Upvotes: 1

MaheshMajeti
MaheshMajeti

Reputation: 187

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

DEMO HERE

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

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.

Upvotes: 2

Fallup
Fallup

Reputation: 2427

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.

Upvotes: 3

Jignesh Kheni
Jignesh Kheni

Reputation: 1302

 <div style="width:300px;overflow:auto;">

 </div>

put your code inside this div

i updated jsfiddle here check it.

http://jsfiddle.net/8J2KM/2/

Upvotes: 0

Related Questions