Child div ignoring parent width without using white-space nowrap

Question

For a very specific use case, I have :

• a parent div with a fixed width
• a child div with an unknown width AND a max-width

Here is a sample : http://jsfiddle.net/t9xUV/

CSS:

.parent{
  width: 400px;
  height: 400px;
  background-color: grey;
}

.child{
  background-color: red;
  height: 200px;
  max-width: 500px;
}

HTML:

<div class="parent">
    <div class="child">dddd ddddddd dddddddd ddddddddddddd ddddd dddddddddd ddddddd dddddddd dddddddddddd
    </div>
</div>

I want the child to take its own width, ignoring the parent width.

I tried :

• position:absolute for the child but the words are wrapped regarding the parent width
• white-space: nowrap for the child but the max-width property is then "ignored" by the words

Any idea ?

Answer 1

Here is a working solution : http://jsfiddle.net/t9xUV/1/

Just set this css property to the child element :

  margin-right:-999999px;

Source : Forcing Block Elements to Not Wrap in IE (no fixed width parent)