Float images into overflow without wrapper div - css

Question

I got some images into a div.
<div>
<img />
<img />
<img />
<img />
</div>
All images are set to the same height of 50px. The width is set to auto.
The question is, how do i get the images to float left into a horizontal line that reached into the parent div's overflow area. The parent div need a width of 100%.
I want to set the div to overflow-x: scroll. When the images are simply float: left they break into another line if they extend the divs width. But how can I get them into the overflow, so i have to scroll to see the others?
The main problem is that i can't use js or a wrapper div. The problem has to be solved with css.

Answer 1

Use white-space: nowrap; on the container div and display:inline on the img elements.
FIDDLE
<div>
<img src="http://placehold.it/350x50"/>
<img src="http://placehold.it/350x50"/>
<img src="http://placehold.it/350x50"/>
<img src="http://placehold.it/350x50"/>
</div>
div
{
white-space:nowrap;
overflow-x: auto;
}
img
{
display: inline;
margin-right: 10px;
}

Answer 2

TRY this.. i hope this one can help you.,
Cascsading Syle..
.float_l { float: left }
.float_r { float: right }
.col_w200 {
overflow: scroll;
height: 300px;
width: 200px;
}
.lp_frontpage { margin: 0; padding: 0; list-style: none }
.lp_frontpage li {
margin: 0;
padding: 0;
display: inline
}
.lp_frontpage li a {
float: left;
display: table;
width: 200px;
height: 100px;
margin: 0 10px 10px 0
}
.lp_frontpage li a img { width: 190px; height: 90px; border: 1px solid #3c4445; padding: 4px; }
HTML CODE..
<div class="col_w200 float_r">
<h2>Web Design Gallery</h2>
<ul class="lp_frontpage">
<li><img width="200" height="100" src="images/_01.jpg" alt="Image 01" /></li>
<li><img width="200" height="100" src="images/_image_02.jpg" alt="Image 02" /></li>
<li><img width="200" height="100" src="images/_03.jpg" alt="image 03" /></li>
<li><img width="200" height="100" src="images/_04.jpg" alt="image 04" /></li>
</ul>
</div>