设置两列布局css，其中一列有两个部分

下面是我试图完成的一个快速草图。Nvm，我没有足够的技能在这个盒子里工作。
我已经写了一些，我会随便写的， 我想让第三组坐在与第一组相同的高度。尝试了很多东西，包括利润率。我错过了什么吗？我很容易就能坐到第二节的高度

css:

#col11{
margin: 0;
float: top;
width: 50%;
height: 100;
border: 1px red solid;
}

#col12{
margin: 0;
float: left;
width: 50%;
height: 400;
border: 1px blue solid;
}

#col21{
    margin: 0px;
float: right;
clear: none;
width: 49%;
height: 500;
border: 1px pink solid;
}

---

只要改变潜水顺序，你就可以出发了

HTML

---

html只是idsyou rock man的普通div，它给了我一些关于如何思考这些页面的非常好的见解。

<div id="col11"></div>
<div id="col21"></div>
<div id="col12"></div>

#col11{
    margin: 0;
    width: 50%;
    height: 200px;
    border: 1px red solid;
    float: left;
}

#col12{
    margin: 0;
    float: left;
    width: 50%;
    height: 300px;
    border: 1px blue solid;
}

#col21{
    margin: 0px;
    float: right;
    clear: none;
    width: 49%;
    height: 500px;
    border: 1px pink solid;
}