CODEWITHSUNDEEP
htmlcss
whtlnv
whtlnv

Reputation: 2207

div within container won't scroll horizontally

I have a dynamic <ul> inside a <div>, I want that <div> to adjust to the size of the <ul>. There's no problem with that. But when I wrap everything on a container <div> with overflow: auto, the first <div> won't adjust to the size of the <ul> but to the size of the container, so the <ul> and <li> break and splatter into the right border of the <div> and won't scroll HORIZONTALLY.

The structure loks like:

<div id="mainContainer">
    <div id="iWantToBeHuge">
        <ul>
            <li> Stuff </li>
         </ul>
    </div>
</div>

And the CSS:

#mainContainer {

    width: 200px;
    height: 500px;

    float: left;

    overflow: auto;

}

#iWantToBeHuge {

    width: auto;
    height: 95%;

    /*    already tried these    */
    /*    position:absolute;     */
    /*    position:relatve;      */
    /*    float: left;           */

}

http://jsfiddle.net/7EYTh/

Also - Adding a static size to the is not an option, the contents can be anything between 30px and 3000px wide.

Upvotes: 1

Views: 13069

Answers (2)

JesusRugama
JesusRugama

Reputation: 51

You shouldnt be using height: 95%; , this means when you use relative height the element uses the parent to determine the size. So you are telling #iWantToBeHuge to use 95% of #mainContainer height.

If you want to see a scrollbar try changing #iWantToBeHuge height to a bigger size than #mainContainer ie: 600px. Or just remove the height style so it can adapt to the ul.

EDIT: try using this CSS for horizontal scroll:

#mainContainer{
    width: 200px;
    height: 600px;
    overflow: auto;
}

#iWantToBeHuge ul li{
    white-space: nowrap;
}

Upvotes: 2

T J
T J

Reputation: 43156

Jesus Rugama's answer explains why there's no vertical overflow. Since you're looking for horizontal overflow,

Currently nothing is horizontally overflowing your container. If you want scrollbar, you should create overflow, for example

#iWantToBeHuge {
  width: auto;
  height: 95%;
  white-space:nowrap;
}

Demo

Upvotes: 3

Related Questions