How do I crop the text horizontally?

I need my content in a specific container. If the content increases horizontally, the container should crop, and if the content increases vertically the container should expand. here is my code:

<div style="padding:10px; width:602px; background:gold; clip: rect(0px, 602px, auto, 0px);">
  <div style="padding:10px; width:1000px; background:pink">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci开发者_JS百科dunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
  </div>
</div>

I also tried using overflow but it is not working well.

here is my actual code http://jsfiddle.net/QeahW/7/ the dropdown div is not showing under the about company link. dont know how to solve it.

Do you mean you want it like this? : http://jsfiddle.net/N4qvK/

I removed the widt on the inner container so that the inner block always remains withing the outerblock with the width.