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?
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.
overflow: hidden
should give you the correct behavior. My guess is thatRTL
is messed up because you havefloat: left
on the encapsulateddiv
s.Beside that bug, you got the right behavior.
The following worked for me without floating (I modified your example a little for visual effect):
The divs may be separated by spaces. If you don't want this, use
margin-right: -4px;
instead ofmargin: 5px;
for.slide
(it's ugly but it's a tricky problem to deal with).None of the above worked for me.
In my case, I needed to add the following to the user control I had created:
Try to use
width: 3000px;
for the case of IE.