How can I avoid div from executing new line if one line is already full?

How can I avoid <div> tags from executing new line if one line is already full. Let's assume that this div has group of images.

------------------------------------
|                                  |
|     Image 1           Image 2    |
|                                  |
|                                  |
|     Image 3           Image 4    |
|                                  |
------------------------------------

The images in the <div> executes new line during the php loop and appears a scroll bar because of the overflow: scroll; code in CSS. My desired output is:

|----------------------------------|
|                                  |
|     Image 1      Image 2     Imag|
|                                  |
|                                  |
|----------------------------------|

Note: Image 3 and 4, prints if you scroll the div to the side.

That's my desired output wherein there will be a horizontal scroll bar and the view of the scroll would be horizontal. Any idea on how to do this?

Solution

Apply white-space: nowrap; to your div.

div{
  white-space: nowrap;
}