Showing the part of a hidden DIV within a DIV - css

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/

Answer 2

you need to wrap them in a new div, give the div a width, (bigger than your outer div) it will be cut off by the outer div's overflow hidden.
on thing to note: the width of that inner div is not adjusting with the content, either you specifically set it very high, or you have to calculate it to the content either just put it hardcoded in css, or use javascript.
html:
<div class="outer">
<div class="inner">
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
<div class="label">4</div>
</div>
</div>
css:
.outer {
background: #800;
height: 90px;
width: 300px;
overflow: hidden;
white-space: nowrap;
}
.inner {
width: 460px;
}
.label {
float: left;
display: block;
background: #888;
width: 75px;
height: 50px;
margin: 10px;
padding: 10px;
line-height: 50px;
font-size: 45px;
text-align: center;
}
working example:
http://jsfiddle.net/f2wpm/