CSS：div位置重叠

Question

这是页面的屏幕截图

我想将“img”div移到“regionbutton”div的右侧

然后我在css上设置regionbutton div和img div为 float：left

和“chartwithoverlay”div与清除：两者

但结果似乎每个人都像see this link

一样彼此重叠

另外，我没有为包含地图图表的“colormap”div（在chartwithoverlay内）设置任何内容 但它有像谷歌这样的谷歌里面的div

这是代码

div{

	font-family: Roboto;
}
#regionbutton{
	width:100px;
	float:left;
	
	}
#img{
	width:700px;
	float:right;
}
}
#chartwithoverlay1{
	clear:both;
	position: relative;
}
#overlay1{
	   width: 400px;
       height: 50px;
	   font-size:40px;
	   color:#636466;
       position: absolute;
	   z-index:1000;
       top: 550px;   /* chartArea top */
       left: 10px /* chartArea left */
	}
	
#chartwithoverlay2{
	 clear:both;
	 position: relative;
}
#overlay2{
	   width: 400px;
       height: 50px;
	   font-size:40px;
	   color:#636466;
       position: absolute;
	   z-index:1000;
       top: 550px;   /* chartArea top */
       left: 10px /* chartArea left */
	}
	
#chartwithoverlay3{
	clear:both;
	 position: relative;
}
#overlay3{
	   width: 400px;
       height: 50px;
	   font-size:40px;
	   color:#636466;
       position: absolute;
	   z-index:1000;
       top: 550px;   /* chartArea top */
       left: 10px /* chartArea left */
	}

<div id="regionbutton">
	<div id="radio1"><input type="radio" name="region" id="all" value="all" /><label for="all">All</label></div>
	<div id="radio2"><input type="radio" name="region" id="africa" value="002" /><label for="africa">Africa</label></div>
	<div id="radio3"><input type="radio" name="region" id="americas" value="019" /><label for="americas">Americas</label></div>
	<div id="radio4"><input type="radio" name="region" id="europe" value="150" /><label for="europe">Europe</label></div>
	<div id="radio5"><input type="radio" name="region" id="asia" value="142" /><label for="asia">Asia</label></div>
</div>

<div id="img">
    <img src="legend.png" alt="" />
</div>

<div id="chartwithoverlay1">
    	<div id="overlay1">WEEE</div>
		<div id='colormap1'> </div>
    </div>
	
	<div id="chartwithoverlay2">
    	<div id="overlay2">Batteries</div>
		<div id='colormap2'> </div>
    </div>
	
	<div id="chartwithoverlay3">
    	<div id="overlay3">Packaging</div>
		<div id='colormap3'> </div>
    </div>

那么为每个div设置位置的正确方法是什么？