CSS - make floating boxes stay on the "same line"

Question

Consider the following fragment:

<html>
    <head>
        <style type="text/css">
        #container {
            width: 400px;
            height: 600px;
            background-color: lightgrey;
        }

        .item {
            width: 50px;
            overflow: hidden;
            white-space: nowrap;
            float: left;
            border: 1px solid red;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="item">ITEM 1</div>
            <div class="item">ITEM 2</div>
            <div class="item">ITEM 3</div>
            <div class="item">ITEM 4</div>
            <div class="item">ITEM 5</div>
            <div class="item">ITEM 6</div>
            <div class="item">ITEM 7</div>
            <div class="item">ITEM 8</div>
            <div class="item">ITEM 9</div>
            <div class="item">ITEM 10</div>
            <div class="item">ITEM 11</div>
            <div class="item">ITEM 12</div>
            <div class="item">ITEM 13</div>
            <div class="item">ITEM 14</div>
            <div class="item">ITEM 15</div>
            <div class="item">ITEM 16</div>
        </div>
    </body>
</html>

It gives me the following result:

enter image description here

What I want is for all the inner boxes to stay on the same line yet the container having the width 400px in case when the inner boxes don't fill it up completely, like this:

enter image description here

I'd really appreciate if someone hinted me on this. Thanks in advance!

if you want to specify the width where you want to overflow the items? same line means single line? is that right? — Developer, Dec 06 '11 at 13:09
yes, exactly. I want the container box to *grow* if it doesn't fit its content, but not shrink. — Andrey Balaguta, Dec 06 '11 at 13:28

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

You could try working with display:table(-row)(-cell) instead of floating, see my answer to this question: Force <DIV> to stay in one line with scroll bar

Important remark, however, is that this won't work in IE7...

edited May 23 '17 at 12:25

Community

1
1

answered Dec 06 '11 at 12:35

ptriek

9,040
5
31
29

alanj · Answer 2 · 2011-12-06T12:49:45.910

-1

You can do a white-space: nowrap on the elements in the container that you don't want to wrap.

Demo here http://www.w3schools.com/cssref/pr_text_white-space.asp

edited Dec 06 '11 at 12:49

answered Dec 06 '11 at 12:39

alanj

171
1
11

4

that won't do a thing, nowrap is for text only... – ptriek Dec 06 '11 at 12:44

CSS - make floating boxes stay on the "same line"

2 Answers2