display div elements in parent with overflow hidden - html

Question

I have a div with class container. I have 3 more divs inside .container. What I want is to display internal divs float: left so that 2 divs tags are visible inside .container and the third one is invisible and is placed on the right side of first 2 div tags which are visible. I am trying the following code but it makes all tags visible all the time.
jsfiddle
<div class="container">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
css
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
}
.div {
width: 200px;
height: 200px;
background: blue;
float: left;
border: 1px solid red;
}
I want above to look like this

Answer 1

You can do as such in other way,
HTML
<div class="container">
<div class="innerContainer">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</div>
CSS
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
}
.innerContainer {
position: relative;
width: 605px;
height: 500px;
overflow: hidden;
}
.div {
width: 200px;
height: 200px;
background: blue;
float: left;
border: 1px solid red;
}
Check over here http://jsfiddle.net/nftp6/8/

Answer 2

Use:
display: inline-block;
white-space: nowrap;
For that effect
Fiddle:
http://jsfiddle.net/Hive7/nftp6/5/

Answer 3

Use display:inline-block instead of float and set white-space:nowrap to the container:
.container {
position: relative;
width: 405px;
height: 500px;
background: red;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.div {
width: 200px;
height: 200px;
background: blue;
display: inline-block;
border: 1px solid red;
}
Demo fiddle
Now you'll most likely face some white-space issues, read this answer for multiple ways to handle that