CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 283

Divs next to each other, with size, no linebreak

I want many little div-s next to each other, with no linebreak:

<div style="overflow: scroll;">

<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>

</div>

the problem is, the width works, but it goes to new line if overflows, so no scroll horizontally.

Upvotes: 2

Views: 4608

Answers (4)

Riz
Riz

Reputation: 10246

Here is the script for you.

Not sure if that's exactly what you want.

http://jsbin.com/anoran/edit#javascript,html

UPDATED:

http://jsbin.com/anoran/2/edit

Upvotes: 1

Ali
Ali

Reputation: 22317

<div style="overflow-x: scroll; width:100%|400px">
    <div style="width:10000px">


<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>
<div style="float: left; width: 40px;"></div>


    </div>
</div>

worked in chrome!

Upvotes: 1

sandeep
sandeep

Reputation: 92803

You can achieve this with white-space & display:inline-block;. Write like this:

.parent{
 white-space:nowrap;
overflow:scroll;
}
.parent > div{
 display:inline-block;
 white-space:normal;
}

Check this http://jsfiddle.net/EUtLh/

Upvotes: 8

user1123557
user1123557

Reputation:

The width of your general container in which these divs will be placed needs to be set to "width:100%", so that i can adapt to the growing size.

Upvotes: 1

Related Questions