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?
Try using
white-space: nowrap;
in the container style (instead ofoverflow: hidden;
)The
<span>
tag is used to group inline-elements in a document.(source)
you can use
for your container and therfore avoid the
overflow: hidden;
. It should do the job if you used it just for warpping purpose.This worked for me:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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:
But only in Chrome and Safari :/
The combo you need is
on the parent and
on the children