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.

I tried to make it work like below.

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

This works in most cases. However, in some special cases, the rendering is incorrect. I found the container DIV change to 3000px width in RTL of IE7; and it turns to be messy.

Is there any other way to make a container DIV not to wrap?

i added this tag : **white-space: nowrap;** and this tag: **text-overflow: ellipsis;** to my code — saber tabatabaee yazdi, Dec 12 '16 at 11:52

score 292 · Answer 1 · answered Apr 01 '11 at 16:06

292

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

answered Apr 01 '11 at 16:06

notkwite

2,929
1
14
2

fguillen · Answer 2 · 2012-12-08T23:03:20.880

65

If I don't want to define a minimal width because I don't know the amount of elements the only thing that worked to me was:

display: inline-block;
white-space: nowrap;

But only in Chrome and Safari :/

edited Dec 08 '12 at 23:03

answered Sep 17 '12 at 18:01

fguillen

36,125
23
149
210

JSideris · Answer 3 · 2017-03-08T00:06:14.783

40

The following worked for me without floating (I modified your example a little for visual effect):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

The divs may be separated by spaces. If you don't want this, use margin-right: -4px; instead of margin: 5px; for .slide (it's ugly but it's a tricky problem to deal with).

edited Mar 08 '17 at 00:06

answered Jun 09 '13 at 00:03

JSideris

5,101
3
32
50

Great answer. I've added a similar example below but I deleted it after I've seen yours. If you don't have to support IE9, you can also use flexbox: https://jsfiddle.net/7gsrb38L/1/ – ValentinVoilean Sep 19 '15 at 07:42
You can use HTML comments between the divs `
` if you want to remove the extra spaces between them. The inline-block style causes the white space in your code to be picked up as space in the HTML document.
– Jo. Jul 06 '16 at 20:28
@Jo. to reduce the page size you could rather use something what is not rendered e.g. when using php: `
` renders as `
` in the source code.
– luukvhoudt Nov 03 '17 at 14:47
Also, if you generate the HTML with JavaScript you can avoid spaces. I use [DOThtml](http://jsideris.com/DOThtml/). The above HTML can be replaced with this: `dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")` – JSideris Nov 03 '17 at 18:06

score 34 · Answer 4 · answered Apr 19 '17 at 16:05

34

The combo you need is

white-space: nowrap

on the parent and

display: inline-block; // or inline

on the children

answered Apr 19 '17 at 16:05

dansch

6,059
4
43
59

score 26 · Answer 5 · edited Nov 01 '17 at 20:45

26

This worked for me:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Nov 01 '17 at 20:45

grg

5,023
3
34
50

answered Aug 12 '15 at 14:51

Turako

614
7
11

This with overflow:hidden worked a treat for me. Thanks. – Alfie Mar 31 '17 at 13:32

score 10 · Answer 6 · answered Apr 05 '09 at 12:55

10

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.

answered Apr 05 '09 at 12:55

Yuval Adam

161,610
92
305
395

1

I'll check whether it is due to "float:left" on encapsulated divs. But, same code works fine on Firefox and Safari, just not on IE. So, I really doubt this is the case. – Morgan Cheng Apr 05 '09 at 12:58

score 6 · Answer 7 · answered Apr 02 '20 at 09:47

6

Use display:flex and white-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

answered Apr 02 '20 at 09:47

Hari Kishore

2,201
2
19
28

I don't think that `white-space` has to do with `display: flex`. I had success just using `white-space: nowrap` – Brian Underwood Dec 24 '20 at 09:53
@BrianUnderwood, when combined width of children exceeds 100%, it helps. See this post where this particular behaviour of flex is unwanted: https://stackoverflow.com/questions/30684759/flexbox-how-to-get-divs-to-fill-up-100-of-the-container-width-without-wrapping – Guillaume Jun 23 '21 at 13:09

score 2 · Answer 8 · answered Oct 16 '13 at 22:07

2

None of the above worked for me.

In my case, I needed to add the following to the user control I had created:

display:inline-block;

answered Oct 16 '13 at 22:07

J-DawG

1,035
9
24

score 2 · Answer 9 · answered Feb 29 '12 at 18:30

2

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

answered Feb 29 '12 at 18:30

Andres GR

47
4

Paka · Answer 10 · 2013-09-03T23:33:30.550

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.

edited Sep 03 '13 at 23:33

answered Sep 03 '13 at 21:08

Paka

11
2

score 1 · Answer 11 · answered Apr 05 '09 at 13:09

1

The min-width property does not work correctly in Internet Explorer, which is most likely the cause of your problems.

Read info and a brilliant script that fixes many IE CSS problems.

answered Apr 05 '09 at 13:09

Aistina

12,435
13
69
89

score 0 · Answer 12 · answered Jun 13 '18 at 08:56

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

score -1 · Answer 13 · answered Apr 27 '15 at 11:55

-1

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

answered Apr 27 '15 at 11:55

Mike

20,010
25
97
140

While this is true, it doesn't appear to address the question at all. – Quentin Sep 23 '16 at 13:14
This perfectly addresses the question because span and div are identical in everithing except that div is wrapped and span is not. And you can implement whatever workarounds you wish. – Mike Sep 23 '16 at 15:18
3

Does that mean that your suggestion is "Use spans instead of divs"? Because that isn't what you said. – Quentin Sep 23 '16 at 15:26

How to make a DIV not wrap?

13 Answers13

Linked

Related