CSS并排div位于第一个的中间

Question

See image: https://dl.dropboxusercontent.com/u/63494571/whatswrong_div.jpg

As you can see in the image above, for some reason my image is only part way up the first div, it should be right next to it with the same height.

Here is a link to an image of how it will eventually look: https://dl.dropboxusercontent.com/u/63494571/add_sale_new.jpg

css

.add_sale_background {
    background-color:#353535;
    border:solid #000 1px;
    border-radius: 10px;    
}
.add_sale_container { width:210px; margin:1em; font-size:14px; display:inline-block; }

.add_sale_image_container { width:150px; text-align:left; padding:4px; display:inline-block; }
.add_sale_image { height:135px; width:135px; background-size:cover; margin: 7.5px; }
.add_sale_selected_product > span {
    margin:2px;
    border-radius:5px;
    padding:2px;
    cursor:pointer;
    background-color:#353535;
    border:solid #000 1px;
    border-radius: 5px;
    display:inline-block;
}
.add_sale_selected_product > span:hover { background-color:#005c9c; }

.add_sale_controls_container {
    width:35px;
    height:200px;
    display:inline-block;
}

html

    <div class="sidebar">
        Sidebar
    </div>
    <div class="add_sale_container">
        <form name="sale">
            <div class="add_sale_image_container add_sale_background">
                <div>image1</div>
                <div class="add_sale_image" style="background-image:url(images/image4.JPG);"></div>
                <div class="add_sale_selected_product">
                    <span>KR</span>
                </div>
                <input type="hidden" id="applied_product" value="KR" />
            </div>
            <div class="add_sale_controls_container add_sale_background">
                dsa
            </div>
        </form>
    </div>

Answer 1

Float the control section right, float: right;

DEMO http://jsfiddle.net/kevinPHPkevin/fAAXU/

Answer 2

To get where you want to go you'll need to add the following to the following css:

.add_sale_image_container { 
    float: left; 
    margin-right: 10px;
}

I made a jsfiddle that shows you how it looks: http://jsfiddle.net/mattokdla/L9Wre/

You can leave the over all container to inlin-block without floating it left, but the divs inside need to be floated left as show on the jsfiddle file to make it work. This way it also lets you control the margin space between the 2 divs.