CSS White-Space:Nowrap Horizontal Scroll Bug

css white-space:nowrap horizontal scroll bug

An easy solution is to do this: on #outer, remove width: 100% and add float: left.

Live Demo

CSS white-space:pre always renders a horizontal scrollbar in firefox

This looks to be a bug in Firefox. (The same problem is in the latest nightly build, so it'll be here for a while.) And there doesn't seem to be a solution, only workarounds.

The problem is that, if the container is positioned absolutely, the procedure with Gecko appears to be as follows:

• The absolutely positioned container only needs to be as wide as its contents
• So if the contents are, e.g. 300px wide, then the container will be 300px wide too
• If the contents are higher than the container, add a vertical scrollbar
• But don't adjust the container's width to account for this scrollbar
• So now the contents are wider than the container's viewport.

Example:

#definitionDiv {  position: absolute;  left: 20px;  top: 20px;  max-height: 150px;  overflow: auto;}.data {  width: 220px;  height: 220px;  border: 40px inset #CCB;  background: #CCB;}

<div id="definitionDiv">   <div id="definitionDivContent">    <div class="data">    </div>  </div></div>

No horizontal page scroll when nowrap is set on DIV

The position: fixed is the cause of this issue. If your table doesn't need to be fixed, then you can remove that CSS rule and it will work.

http://jsfiddle.net/UY4K3/4/

You can also use position:absolute and that will work.

http://jsfiddle.net/UY4K3/10/

If you want to use the browser scroll, and not put a scroll bar on the table then I think these are your only options with fixed positioned elements overflowing the body.

Here's your more complicated fiddle with all position:fixed changed to position:absolute.

Uneven horizontally scrolling div with white-space: normal

The problem is caused by the default vertical-align: baseline property on inline elements. This causes the blocks to line themselves up with the baseline of the text. This is a problem when the text wraps as the baseline is pushed down.

Set vertical-align: top on .item

Working Example

.slider {  white-space: nowrap;  overflow: auto;}.item {  display: inline-block;  position: relative;  width: 200px;  height: 150px;  margin: 10px;  background: grey;  vertical-align: top;}.info {  position: relative;  height: 100%;  color: #fff;  white-space: normal;}

<div class="slider">  <div class="item">    <div class="info">      <h1>Title</h1>    </div>  </div>  <div class="item">    <div class="info">      <h1>This is a really long title</h1>    </div>  </div>  <div class="item">    <div class="info">      <h1>Title</h1>    </div>  </div></div>

CSS white-space: no wrap, no horizontal scrollbar and maintain white-space when copied

I got it working to an accuracy of about 99.8% of the time using the following...

XHTML

<pre><code>/* Code here. */</code></pre>

CSS

pre {white-space: pre; width: 75vmax;}

Horizontal Scrolling - white gap issue

This seems to be a common issue with inline-block, some alternatives/workarounds are outlined here. Adding a negative margin worked well enough, but this doesn't work on some older browsers (IE 6/7).

---

Related Topics