CODEWITHSUNDEEP
csshtml
sanchitkhanna26
sanchitkhanna26

Reputation: 2233

Expand div horizontally not vertically

I have a div with 

display:inline-block;
postion:relative;

inside a div with 

display:block;
width:348px;
overflow:hidden;

When the contents of the inner div overflow, I want them to expand horizontally, not vertically. The contents of the inner div consists of thumbnails of photos

Upvotes: 6

Views: 17108

Answers (3)

thgaskell
thgaskell

Reputation: 13226

You just need to set white-space: nowrap on either of the divs (the property is inherited). (Source)

Sidenote: The inner div is not necessary for this to work.

Demo: JSFiddle

HTML

<div class="container">
    <div>
        <!-- Thumbnails -->
    </div>
</div>

CSS

.container {
    display: block;
    width: 348px;
    overflow: hidden;
    white-space: nowrap;
}

.container div {
    position: relative;
    display: inline-block;
}

Upvotes: 18

visualfeaster
visualfeaster

Reputation: 85

Ray Z!

Overflow does matters. So in order to write your css as just

overflow:"hidden"

you should use 

overflow-x: hidden;
overflow-y: scroll;

Upvotes: 0

palerdot
palerdot

Reputation: 7642

Set the width and overflow-x as auto for the inner div

    <div id = "outer">
     <div id = "inner"></div>
    </div>

#outer{
width: 400px;
height: 300px;
border: red thin dotted;
}

#inner{
margin: 15px;
height: 280px;
width: auto;
border: green thin solid;
overflow-x: auto;
}

Here is the fiddle http://jsfiddle.net/jgrgb/

Upvotes: -1

Related Questions