Floating divs of variable length should not be wrapped

Question

I know this is a standard question, but I am trying to get a very special behaviour. I got the following example code:

CSS:

    .left{
        background-color: red;
        min-width: 300px;
    width: 40%;
        float: left;
    }
    .middle{
        background-color: blue;
        width: 40%;
        overflow-x: auto;
        white-space: nowrap;
        float: left;
    }

    .right{
        background-color: green;
        min-width: 100px;
        width: 10%;
        float: left;
    }

HTML:

<div class="left">LEFT</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="right">NOWRAP</div>

I do not want anything to wrap. When resized, the middle div should be rezized, but it shall never wrap! I need variable widths. When I shrink the browser window, at first it looks right: The middle div becomes smaller and gets a scrollbar. This is what I am looking for. But when I continue shrinking the green div gets wrapped. Instead I want the middle div to become smaller and smaller.

I am already using bootstrap 2.

Thanks for your help, best regards, Yaron

Answer 1

Here's the ANSWER.

I've used Bootstrap 3 CSS framework in order to achieve what you asked for with my knowledge. I guess so it can even be done without bootstrap but I'm not that expert. By your post i'm thinking that you're looking for some responsive design. To make it easy I'd suggest you to use Bootstrap 3. Amazing framework that helps to do a lot more things in a seconds.

Answer 2

The green div gets wrapped until the min-width is reached. Then your div.right ("NOWRAP") will float under the middle and left div. To avoid this your have to reverse the order of your divs:

<div class="right">NOWRAP</div>
<div class="middle">This shall get a scrollbar if necessary. Here may be long content.</div>
<div class="left">LEFT</div>

Then make your .right div

position: absolute;
right: 0;

and delete the float. Now you only have to change your floats from the left and middle class to "right" and the width to for example "50%". That's all.

Here an example: http://jsfiddle.net/5MdY3/