Overflow-x and block elements

Question

I'd like to have a div with other divs inside; this div,reached the maximum width of the page, should show a scrollbar. I've already realized something like that with inline elements (like <img> or <span>, but now I'm not sure of how to obtain the same with block elements.

With inline elements I used to do:

<div class="slider">
  <img src="image.png" />
  <img src="image.png" />
  <img src="image.png" />
  <img src="image.png" />
  <img src="image.png" />
</div>

CSS:

.slider{
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
}

If I do the same with block elements, like this:

<div class="slider">
  <div class="content"></div>
  <div class="content"></div>
</div>

The content doesn't slides, but creates a new line and continue in the page vertically. Any suggestions?

CSS:

.content{
  float: left;
  width: 250px;
  height: 250px;
}

EDIT: the structure is more like:

<div class="slider">
  <div class="content">
     <div class="content2"></div>
  </div>
  <div class="content">
     <div class="content2"></div>
  </div>
</div>

I omitted it caus I thought it wasn't important, but probably I was wrong.

Answer 1

Just add style display:inline-block; to child(inner) div elements.

.slider>div{display:inline-block;}