2番目の最も低いコンテナを中央の右のコンテナの真下に押し込む方法は？

私はCSSを学ぼうとしていますが、私はこの問題を抱えています。私はそれを修正するためにされていません。みんな助けてくれますか？2番目の最も低いコンテナを中央の右のコンテナの真下に押し込む方法は？

私は「第2の最も低いコンテナ」を中右コンテナに貼り付けたいと思っています。以下は

JSFiddleリンクです - 以下

はHTML

以下

<body> 
     <div class="MainContainer"> 
      <div class="UpperMostContainer"> 
       UpperMostContainer 
      </div> 
      <div class="RightLeftContainers"> 
       <div class="MiddleLeftContainer"> 
        Middle Left Container 
       </div> 
       <div class="MiddleRightContainer"> 
        Middle Right Container 
       </div> 
      </div> 
      <div class="LowerMostContainer"> 
       Lower Most Container 
      </div> 
      <div class="SecondLowerMostContainer"> 
       Second Lower most Container 
      </div> 
     </div> 
    </body>

はCSS

.MainContainer { 
    width: 1000px; 
    height: 500px; 
    background-color: blue; 
    margin: auto auto; 
    padding: 10px; 
} 

.UpperMostContainer { 
    width: 1000px; 
    height: 100px; 
    background-color: green; 
} 

.MiddleLeftContainer { 
    width: 50%; 
    height: 150px; 
    background-color: gray; 
    float: left; 
} 

.MiddleRightContainer { 
    width: 50%; 
    height: 100px; 
    background-color: red; 
    float: right; 
} 

.LowerMostContainer { 
    height: 250px; 
    width: 50%; 
    background-color: green; 
    float: left; 
    clear: left; 
} 

.SecondLowerMostContainer { 
    width: 50%; 
    height: 300px; 
    background-color: purple; 
    clear: right; 
    float: right; 
}

出典

2016-05-27 Bharat Nanwani

私はこのレイアウトにフレックスボックスを使用することを検討したいと思います。 – matmik

フレックスボックスを使っても構いませんが、私は学んでいます。フレックスボックスを使わなくてもこれを入れたいと思っています。 –

フレックスボックスを使用していないのは、このレイアウトを行う正しい方法です。しかし、幸運！ – matmik