выравнивание дивов в 1 строчку

[OlegBrony]

Скрытый текст

Есть строчка. в начале на треть страницы 1 блок, 2 блок разделяется на 2 маленьких, и 3 блок тоже большой. 3 блока нормально встали, но 4 (2 маленький) не хочет. вот, что выходит.

должно быть так. как это сделать? 

Скрытый текст

<
    <div>
        <div class="stock_left">
            <a href="#"><img src="img/content/stock400x500.jpg" alt="stock"></a>
        </div>
        <div class="regist">
            <img src="img/content/regist400x240.png" alt="regist">
        </div>    
        <div class="stock_right">
            <img src="img/content/stock400x500.jpg" alt="stock">
        </div>
    </div>
    <div class="socnet">
        <img src="img/content/regist400x240.png" alt="regist">
    </div>>


<.stock_left {
    float: left;
    overflow: auto;
    width: 30%;
    height: 504px;
    margin: 20px 1% 20px 4%;
}
.stock_left>a>img, {
    width: 100%;
    max-height: 500px;
}
.regist {
    float: left;
    display: inline;
    overflow: auto;
    width: 30%;
    height: 244px;
    margin: 20px 1% 20px 0;
}
.stock_right {
    float: left;
    overflow: auto;
    width: 30%;
    height: 504px;
    margin:20px 4% 20px 0;
}>

 

Edited August 3, 2016 by klierik

[alejandro13]

Вложите два маленьких блока в одну обертку, например как-то так: 

https://jsfiddle.net/awqjy62d/

 

[OlegBrony]

34 минуты назад, alejandro13 сказал:

Вложите два маленьких блока в одну обертку, например как-то так: 

https://jsfiddle.net/awqjy62d/

 

спасибо, большое. работает.