Text overflowing floated div

Question

I have a problem with a fluid layout I am attempting to create. I was wondering why I am not able to get overflow:hidden to work on the left menu text on this site.

As you can see here, I have labelled in blue, the text which I would like contained within the left menu div, although it overflows and pushes the rest of the site down with it.

Please see here for a JS Bin: http://jsbin.com/OcoJEpe/2/edit?html,css,output

Thanks for your help.

James.

Answer 1

The reason that overflow:hidden; is not working is because your left-menu div is expanding due to the size of the text. You have no code (css or html) that is restricting the height of your left-menu . There are a number of ways to solve this problem, but essentially you need to tell the div to only go to a certain height.

Answer 2

Your height on that element is using its default value of auto so it will expand to accommodate its content.

You need to specify some height:

  #left-menu{height:200px;} //OR SOME NON-AUTO HEIGHT

Answer 3

您需要在左侧菜单中增加高度，看看这个jsfiddle

Answer 4

This is a working example, you should just add a height for p and set overflow:hidden .

Here is html

<p id="height"><span>This text is overflowing parent div...</span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a odio ac nulla aliquet molestie. Cras aliquet metus eget vehicula vulputate. Donec eget nisl sit amet quam fringilla molestie. Vivamus elementum non justo quis consequat. Etiam quis quam eu nisi cursus aliquet eu et arcu.
    </p>

and css

p#height{
      height:30px;
      background:red;
      overflow:hidden;
    }