How to make the div's appear inline in the following code?

Problem

How to make the following div's appear inline in the following html with a scroll

@ http://jsfiddle.net/hj2E6/5/

  <div id="scrollable">
  <div class="childDiv">
      <div class="inner">I am the first div in first should appear inline with the rest of the text</div>
      <div class="inner">I am the second div in first should appear inline with the rest of the text</div>
  </div>
  <div class="childDiv">
      <div class="inner">I am the first div in Second should appear inline with the rest of the text</div>
      <div class="inner">I am the second div in Second should appear inlinewith the rest of the text </div>
  </div>


Here is the CSS I have written

    #scrollable {
        width : 50%;
        height : 350px;
        background-color: #d0e4fe;
        overflow-x: scroll;
        overflow-y: hidden;

    }
    .childDiv {
        float: left;

    }
    .inner {
        float : left;
    }
Problem courtesy of: John Doe

Solution

You can use display:inline-block; and white-space:nowrap; to make the divs appear inline and stay on the same line :

DEMO

Inline-block and inline elements render with a white-space between them,

The white-space CSS property is used to to describe how whitespace inside the element is handled.

nowrap : Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

(source: MDN)

CSS :

#scrollable {
    width : 50%;
    height : 350px;
    background-color: #d0e4fe;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}
.childDiv {
    display:inline-block;
    white-space:nowrap;
}
.inner {
    display:inline-block;
}
Solution courtesy of: web-tiki

Discussion

you have to specify a width on child element. without specifying a width it will containing block horizontally. check the DEMO.

so define a width on your class .childDiv and in .inner.

.childDiv 
{
float: left;
width : 50%; /*required to specify the width*/
background:red; /*just for visibility used here*/
padding:3px;
}
.inner {
float : left;
width : 50%; /*required to specify the width*/
}
Discussion courtesy of: Kheema Pandey

This recipe can be found in it's original form on Stack Over Flow.