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?
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;
Try using white-space: nowrap;
in the container style (instead of overflow: hidden;
)
Use display:flex
and white-space:nowrap
p{_x000D_
display:flex;_x000D_
white-space:nowrap;_x000D_
overflow:auto;_x000D_
}
_x000D_
<h2>Sample Text.</h2>_x000D_
_x000D_
<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>_x000D_
_x000D_
<h3>Then some other text</h3>
_x000D_
overflow: hidden
should give you the correct behavior. My guess is that RTL
is messed up because you have float: left
on the encapsulated div
s.
Beside that bug, you got the right behavior.
This worked for me:
.container {_x000D_
display: inline-flex;_x000D_
}_x000D_
_x000D_
.slide {_x000D_
float: left;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="slide">something1</div>_x000D_
<div class="slide">something2</div>_x000D_
<div class="slide">something3</div>_x000D_
<div class="slide">something4</div>_x000D_
</div>
_x000D_
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.
The following worked for me without floating (I modified your example a little for visual effect):
.container_x000D_
{_x000D_
white-space: nowrap; /*Prevents Wrapping*/_x000D_
_x000D_
width: 300px;_x000D_
height: 120px;_x000D_
overflow-x: scroll;_x000D_
overflow-y: hidden;_x000D_
}_x000D_
.slide_x000D_
{_x000D_
display: inline-block; /*Display inline and maintain block characteristics.*/_x000D_
vertical-align: top; /*Makes sure all the divs are correctly aligned.*/_x000D_
white-space: normal; /*Prevents child elements from inheriting nowrap.*/_x000D_
_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background-color: red;_x000D_
margin: 5px;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="slide">something something something</div>_x000D_
<div class="slide">something something something</div>_x000D_
<div class="slide">something something something</div>_x000D_
<div class="slide">something something something</div>_x000D_
</div>
_x000D_
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).
The combo you need is
white-space: nowrap
on the parent and
display: inline-block; // or inline
on the children
<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>
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.
Try to use width: 3000px;
for the case of IE.
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 :/
The <span>
tag is used to group inline-elements in a document.
(source)
Source: Stackoverflow.com