css - 2つのセクションを持つ列の1つで2列のレイアウトcssを設定する

Question

これが私が達成しようとしていることの簡単なスケッチです。Nvm、私はこのボックスでこれを機能させるのに十分なスキルがありません。
いくつか書いたので、それを使ってjsfiddleを作成します。 ここでは 、3番目のdivを1番目のdivと同じ高さに配置します。マージンパーセンテージを含む多くのことを試みました。見逃したことはありますか？私はそれを2番目のdivの高さにかなり簡単に座らせることができました。

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;
}

Answer 1

div の順序を変更するだけで準備完了です

デモ

HTML

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

は使用しないでください。は有効な値ではありません。代わりに使用float: top;してくださいtopleft

CSS

#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;
}