CSS white-space nowrap not working

Question

I have a div with several child divs which are floating left. I don't want them to break, so I set them to display:inline-block and white-space:nowrap. Unfortunately nothing happens at all. They just keep breaking.

At the end I want to scroll in x-direction, but when I add overflow-x:scroll; overflow-y:visible it scrolls in y-direction.

.a {
    width: 400px;
    height: 300px;
    white-space: nowrap;
    display: inline-block;
}
.b {
    float: left;
    width: 50px;
    height: 200px;
    display: inline-block;
}

<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="clearfix"></div>
</div>

You can see my complete implementation on JSFiddle

normally you would put the clearfix on the wrapper div - e.g. if using Nicholas Gallagher's newer micro clearfix hack. — Ruskin, Jan 16 '14 at 14:56
Clarify. You want the red .a block to have a scrollbar along the bottom when there are too many .b blocks to fit inside? — Ruskin, Jan 16 '14 at 14:57
@Ruskin: I have a clearfix in my fiddle, but it didn't help. — Julian F. Weinert, Jan 16 '14 at 15:08
@Ruskin You'r right. This is what I wanted. Craighead did solve my problem, see my comment on his answer — Julian F. Weinert, Jan 16 '14 at 15:09

score 12 · Accepted Answer · answered Jan 16 '14 at 15:03

12

I may not fully understand your question but it seems like the divs/scroll behave if you remove: float: left; from .b and add: overflow:auto; to .a

answered Jan 16 '14 at 15:03

Craighead

519
3
8

1

Thanks! I changed `.b` to `display:inline-block` and didn't think of the fact, that inline blocks do not break... :) – Julian F. Weinert Jan 16 '14 at 15:07
1

In short, `white-space` and `float` are not good friends. Even with `nowrap`, elements if given `float` will ump to new line – Waleed93 Jun 03 '20 at 07:45

score 2 · Answer 2 · answered Jan 16 '14 at 15:09

2

Not sure what you mean, but if you stop floading your b, and give your a overflow:auto it should work

see: /jsfiddle.net/88yjz/3/

answered Jan 16 '14 at 15:09

user3004410

36
1

Thanks, Craighead had the same fix. I didn't think of the fact, that inline-blocks do not wrap, when I changed `.b` from `display:block;` to `display:inline-block;` – Julian F. Weinert Jan 16 '14 at 15:11

score -1 · Answer 3 · answered Jan 16 '14 at 15:01

Does this give you what you want? Added overflow scroll.

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-color: #EEEEEE;
}
.a {
    width: 400px;
    height: 300px;
    white-space: nowrap;
    overflow:scroll;          /* Added this line*/
    background-color: lightcoral;
    -webkit-box-sizing:border-box;
}
.b {
    width: 50px;
    height: 200px;
    margin-top: 50px;
    margin-left: 15px;
    display: inline-block;
    background-color: lightgreen;
    -webkit-box-sizing:border-box;
}
.clearfix {
    float: none;
    clear: both;
}

CSS white-space nowrap not working

3 Answers3

Linked