How to make a DIV not wrap?

Question

I need to create a container DIV style that contains multiple other DIV\'s. It is asked that these DIV\'s wouldn\'t wrap if the browser window is resized to be narrow.

Answer 1

you can use

display: table;

for your container and therfore avoid the overflow: hidden;. It should do the job if you used it just for warpping purpose.

Answer 2

The <span> tag is used to group inline-elements in a document.
(source)

Answer 3

Try to use width: 3000px; for the case of IE.

Answer 4

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

Answer 5

overflow: hidden should give you the correct behavior. My guess is that RTL is messed up because you have float: left on the encapsulated divs.

Beside that bug, you got the right behavior.

Answer 6

Try using white-space: nowrap; in the container style (instead of overflow: hidden;)