浮点数和溢出-x：隐藏；

Question

I am trying to hide the rest of a box, if it is beyond the containers width (100% in the actual code) . The elements are floating.

However, it throws them to the next line instead of hiding the remaining part of it.

Here is the example I made for demonstrating the problem.

<div class="wrapper">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box red"></div>

    <!-- Just for showing the pink box -->
    <div style="clear: both;"></div>
</div>

And the CSS

.wrapper {
    width: 180px;
    background-color: pink;

    overflow-x: hidden;
}

.wrapper .box {
    width: 50px;
    height: 50px;

    float: left;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

How can I achieve this?

Here's a fiddle demonstrating the problem: http://jsfiddle.net/bLaxyvwb/2/

Answer 1

Here's a JSFiddle with the changes you need to apply.

Use the following CSS:

.wrapper{
 width: 180px;
 background-color: pink;
 white-space: nowrap;
 overflow-x: hidden;
}

.wrapper .box {
 width: 50px;
 height: 50px;
 display: inline-block;
}

And the HTML should look like this:

<div class="wrapper">
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box red"></div>
</div>

I did the following:

• Added white-space: nowrap to .wrapper
• Removed float:left; from .wrapper .box
• Added display: inline-block; to .wrapper .box