How to make a DIV not wrap ?

Question

This requirement sounds wired, but it is actually requirement.

I need to create a container DIV style that containing 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?

Thanks.

Answer 1

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.

Answer 2

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.