Question

You can see the fiddle here: http://jsfiddle.net/easeS/4/

Here is the html/css I have:

#main div
{
 float:left;
 width:30px;
 margin-right:10px;   
}
#main
{
 overflow:hidden;
    width:100px;
    height:50px;
    border:1px solid;
}

<div id="main">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
</div>

I’m not sure why but it bumps the third div down to a new line instead of hiding it. Any suggestions?

Answer 1

The 3rd div bumps down because there’s not enough space for it to float.
Your 3 divs added up together (inc. margin) is equals to 120px;
The wrapper (#main) is 100px.
Therefore bumping the 3rd div down.

If I understood your question correctly…
What you want to do is hide it the 3rd div, for you to do this, you’d need to:
Add another wrapper div and give it a bigger width. Have a look at my example here