CODEWITHSUNDEEP
htmlcss
Abe Miessler
Abe Miessler

Reputation: 85056

How to hide overflow in this example?

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?

Upvotes: 1

Views: 75

Answers (3)

Galled
Galled

Reputation: 4206

Is because your divs in your div#main are confined only to those dimensions specified in the style of div#main. To float to infinity and beyond, they need to have a space where to float. You can wrap your divs in a container with a very high height.

Try with this demo.

Upvotes: 0

peduarte
peduarte

Reputation: 1677

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

Upvotes: 2

Darek Rossman
Darek Rossman

Reputation: 1323

No need to add extra wrapping divs...

Try this instead:

#main div 
{
 display:inline;
 width:30px;
 margin-right:10px;   
}
#main
{
 overflow:hidden;
    width:100px;
    height:50px;
    border:1px solid;
    white-space: nowrap;
}

Just changed the float rule to display: inline on the divs and added white-space: nowrap to #main.

Upvotes: 1

Related Questions