Child divs not wrapping to stay inside parent

Question

Take a look at this fiddle. http://jsfiddle.net/mstwp/ The html is: ```

Hi

Bob like to play on his violin

``` with CSS: ``` #parent { background-color: #aaaaaa } #one { background-color: #ff0000 } #two { background-color: #00ff00 } .kids { display: inline-block; padding: 2px; white-space: normal; } ``` How can I make div #two wrap earlier so that I can keep both child divs inside the parent div?

Accepted Answer

Just remove the width attached to the parent. It forces the parent div to increase its height to accomodate the content in the div `#two`. SO keep the parent div as such: ```

``` And this should do the trick for you. Alternately, you could add a min-height to the parent div so that it automatically accomodates its width based on the content inside its child. So your parent div could look like this: ```

``` Hope this helps!!! EDIT: Your child divs already wraps inside the parent div. This is 'revealed' when you add a small width to one of the child div named `two`. See that here : http://jsfiddle.net/K2xn5/ If you want you div `two` to wrap within the `parent` div, then there's no point in attaching a fixed width to the `parent`. Instead, you will need to provide a fixed width to the div named `two`. This would then occupy the space AS DEFINED by the content. Your `parent` div would then just keep expanding based on the size of its children, in this case, div `one` and `two`. Check out these fiddles : Fixed width to child, no width to the parent: http://jsfiddle.net/K2xn5/1/ Child div wrapping itself based on the size of its content: http://jsfiddle.net/K2xn5/2/ and http://jsfiddle.net/K2xn5/3/ Hope this helps!!!

Child divs not wrapping to stay inside parent

Solution

Problem