Making a child wider than his parent without width

Question

<div id="parent"> <div id="child"> content... </div> </div> 

Is it possible to make #child as wide as the content? Giving it a width than #parent, with a fixed width if necessary.

(in my case, the content is an unformatted text string that I do not want to rename)

Answer 1

You can set display:inline and white-space:nowrap to your #child , which will give you the results you want. The container will only be wider than the contents inside, and if necessary will exceed the width of the parent.

Demo: http://jsbin.com/ebuxup/edit#html,live

Answer 2

Try using this CSS to avoid line breaks on all #child { white-space: nowrap; } #child { white-space: nowrap; } .

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