html - これらのdivを隣り合わせにする方法

Question

それはどのようなものか：

白いdivを灰色のdivの下に置き、緑のdivがどこにも行かないようにしたい..

これは現時点での私のコードです。

#top {

background-color:#504A4B;
border:1px solid black;
border-radius:5px;
width:500px;
height:200px;
margin-left:auto;
margin-right:auto;
position:relative;
}

#middle {
background-color:#D1D0CE;
width:100px;
height:500px;
margin-left:36.8%;
margin-right:auto;
border:1px solid black;
border-radius:5px;
position:static;
clear: both;
}

#left {
background-color:#25383C;
border:1px solid black;
border-radius:5px;
width:75px;
height:75px;
margin-left:auto;
margin-right:auto;
clear:both

Answer 1

緑色の divを作成し、とposition:absoluteで配置します。このようにして、グレーと白の div から独立して配置できます。topleft

Answer 2

削除する

clear:both;

そして追加

float: left;

#中央と#左の両方に

それはあなたにアイデアを与えるはずです

jsfiddle デモ

また

追加

position:absolute

div#left へ