CSS displaying elements vertically down instead of hortizontal straight

I don't think you will be able to achieve what you are trying to do without re-organizing your markup. You will likely have to put your divs in column containers (at least until flexbox is widely used!).

Quick Example:

HTML:

<div class="container">
    <div class="col-1">
        <img border="0" src="download.jpg" alt="Pulpit rock">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
    <div class="col-2">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
</div>

CSS:

img {
    display: block;
}

.container > div {
    float: left;
}

Explaination:

The natural flow, if elements are inline, is to appear beside one another until a line break is needed. If elements are block level they will always appear below the former element. The other option is to float the elements, but again it will appear beside the former element if there is room, not below.

That's why you would have to adjust your markup to group the elements that you want in a vertical line together--then float the next group beside it.