Question

I’m missing something obvious today, guys – would appreciate some help please.

I’ve got a horizontal row of DIVs inside another DIV. I want the third DIV to show as partly hidden by the top DIV. But it isn’t showing at all.

Here’s the CSS:

.outer {
    background: #800;
    height: 90px;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
}
.label {
    float: left;
    display: block;
    background: #888;
    width: 75px;
    height: 50px;
    margin: 10px;
    padding: 10px;
    line-height: 50px;
    font-size: 45px;
    text-align: center;
}

Here’s the HTML:

<div class="outer">
    <div class="label">1</div>
    <div class="label">2</div>
    <div class="label">3</div>
    <div class="label">4</div>
</div>

Thanks for your help!

Answer 1

I’m missing something obvious today, guys – would appreciate some help
please.

The “obvious” thing you’re missing is that the third and fourth inner divs are dropping underneath because there is not enough horizontal space. For instance, if I check it using Chrome’s Developer Tools:

The simplest way to fix this is to switch from float: left to display: inline-block, with white-space: nowrap (you already have it!) on the containing element:

http://jsfiddle.net/rGfNY/