CSS text in a div not on next line when a div

Question

If I want to put a div in a div:

 <div id="frame"><div id="content">Very long text....</div></div>

And I want the content div to be as wide as the text so the text does not continue on a next line, how can I do this? Also the text that will be outside the frame div (because the content div will be wider then the frame div) must not be visible. I will add a drag functionality to show the not visible text.

Currently, I have the following CSS:

#frame{
  clear: both;
  overflow: hidden;
}

#content{
  display: block;
  float: left;
  width: 100%;
}

But this results that all the text is visible in the frame div, because the text continues on the next line.

Any suggestions?

Thanks!

Answer 1

Use #content { white-space:nowrap;
}

http://jsfiddle.net/TX9Le/

REF: http://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 2

Add white-space: nowrap: http://jsfiddle.net/R8avX/

Answer 3

All you need to do is to give height to frame div: http://jsfiddle.net/aFDEL/