CSS white-space nowrap not working

html css overflow whitespace

39,741

Solution 1

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

Solution 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/

39,741

Author by

Julian F. Weinert

I'm a young, open-minded software developer from Berlin, Germany. Mainly self-educated I had not the easiest way into computer science. But endless hours of perfectionism and my endurance and curiosity helped me getting through "the dip" on my own. During my first employment, starting 2009, I had the chance to age my skills and develop a strong experience in iOS as well as Mac OS development. With more than five years working experience I was able to create a profound knowledge about apple ecosystems, many frameworks and APIs and the work with them. I also worked on backends, server environments and APIs in PHP and front-end applications in PHP, HTML5, JavaScript and CSS3. I'm full-blood programmer but I also do more artistic stuff like theatre lighting, light installations and music. I have a band and also create electronic music as solo artist. My ingenuity, creativity and flexibility are characteristics that I can rely on, when dealing with complex problems or a challenging project. So I'm trying to get all my goods together and use all different kinds of strategies to manage my jobs and get stuff done. Since May 2014 I'm working as freelancer for Web, iOS & Mac OS in Berlin. If you're looking exactly for me, please feel free to visit my Stackoverflow Careers profile or contact me via Xing or LinkedIn. You can find my open source projects on GitHub

Updated on July 19, 2022

Comments

Julian F. Weinert almost 2 years
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
Julian F. Weinert over 10 years

Thanks! I changed .b to display:inline-block and didn't think of the fact, that inline blocks do not break... :)
Julian F. Weinert over 10 years

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;
Waleed93 about 4 years

In short, white-space and float are not good friends. Even with nowrap, elements if given float will ump to new line