CODEWITHSUNDEEP
htmlcsscss-float
greener
greener

Reputation: 5069

HTML/CSS nested divs floating left with scrollbar

I want to do a simple effect with a div with a fixed height and width holds a set of divs which can be scrolled left to right.

Here's the code but for some reason the children don't want to float

.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.a > div​ {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

http://jsfiddle.net/SZzwP/

Upvotes: 0

Views: 4257

Answers (4)

Oriol
Oriol

Reputation: 288080

You don't have to (and shouldn't) change your HTML.

Just use white-space:nowrap to avoid breaking lines

.a{
    width:200px;
    overflow-x:scroll;
    border:3px solid red;
    white-space:nowrap;
}
.a > div {
    width:170px; height:170px;
    display:inline-block;
    background:#eee;
    border:1px dotted #ddd;
}

See it here: http://jsfiddle.net/5Rz98/3/

Upvotes: 3

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You have given each child a width of 170px, but the parent is only 200px. Please change the width of the child to less than 50px:

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:45px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

Also, give overflow-x: auto so that initially the horizontal scroll is not shown.

In case of a slider, you need to use another markup:

<div class="a">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS:

.a       {width:200px; height:200px; overflow-x:auto; border:3px solid red;}
.a > div {width:700px; height:170px;}
.a > div > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

Fiddle: http://jsfiddle.net/fPeUg/

Upvotes: 1

zenkaty
zenkaty

Reputation: 1548

You need another nest div inside .a with a width long enough for all the inner divs to float in, like this:

<div class="a">
    <div class="b">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    </div>
</div>
​.a       {width:200px; height:200px; overflow-x:scroll; border:3px solid red;}
.b {width:800px}
.b > div {width:170px; height:170px; float:left; background:#eee; border:1px dotted #ddd;}

​

Upvotes: 0

Charlie
Charlie

Reputation: 11777

Basically, you want a div inside of the container with a width that can accommodate the two div's side by side. Without doing this, you're trying to float 2 div's with a combined width of over 200px (the container).

HTML

<div class="a">
    <div class="inner">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>​

CSS

.a{
    width:200px; 
    height:200px; 
    overflow-x:scroll; 
    border:3px solid red;
}

.inner{
    width:344px;
}

.inner div{
    width:170px; 
    height:170px; 
    float:left; 
    background:#eee; 
    border:1px dotted #ddd;
}​

http://jsfiddle.net/charlescarver/a4T8f/1/

Upvotes: 1

Related Questions