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

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

Answer 2

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/

Answer 3

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;

Answer 4

The combo you need is

white-space: nowrap

on the parent and

display: inline-block; // or inline

on the children

Answer 5

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.

Answer 6

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