Search code examples
csscss-floatpositioning

Inline-block elements within a fixed width container with overflow:hidden get pushed down

See my fiddle here: http://jsfiddle.net/Waterstraal/bMfbH/2/

The HTML:

<div class="row">
    <div class="actionPanel"></div><div class="resultPanel"></div>
</div>

The CSS:

.row {
    width:500px;
    height: 50px;
    overflow:hidden;
    border:1px solid #ccc;
}
.resultPanel {
    display:inline-block;
    width:450px;
    height: 50px;
    background: #ddd;
}
.actionPanel {
    display:inline-block;
    width:50px;
    height: 50px;
    background:#eee;
}

I want to "slide" the resultpanel to the right (so it's still on the same level as the actionPanel), but instead it gets pushed down out of view.

The width of the actionPanel is being made bigger in javascript so that the total width of the two elements are bigger than the width of the parent element.

Does anyone know how I can achieve the effect i'm after? I've tried to use floating elements, but that had the same result. I also tried to use a table element, to no effect.

Thank you in advance.

Solution

  • Add white-space: nowrap to the container of the inline-block elements, in this case .row.

    http://jsfiddle.net/thirtydot/bMfbH/3/