Javascript CSS:div位置重叠

这是该页面的屏幕截图

我想把“img”div移到“regionbutton”div的右边

然后我将css上的regionbutton div和img div设置为float:left

“chartwithoverlay”div和清除：两者都

但结果似乎每个IV都像这样相互重叠

此外，我没有为包含maps图表的“colormap”div（内部chartwithoverlay）设置任何内容 但它的内部有一个类似于谷歌图表的div

这是密码

div{
字体系列：Roboto；
}
#区域按钮{
宽度：100px；
浮动：左；
}
#img{
宽度：700px；
浮动：对；
}
}
#覆盖图表1{
明确：两者皆有；
位置：相对位置；
}
#叠加{
宽度：400px；
高度：50px；
字体大小：40px；
颜色：#636466；
位置：绝对位置；
z指数：1000；
顶部：550px；/*图表区域顶部*/
左：10px/*图表区域左*/
}
#覆盖图2{
明确：两者皆有；
位置：相对位置；
}
#覆盖层2{
宽度：400px；
高度：50px；
字体大小：40px；
颜色：#636466；
位置：绝对位置；
z指数：1000；
顶部：550px；/*图表区域顶部*/
左：10px/*图表区域左*/
}
#覆盖的图表3{
明确：两者皆有；
位置：相对位置；
}
#叠加3{
宽度：400px；
高度：50px；
字体大小：40px；
颜色：#636466；
位置：绝对位置；
z指数：1000；
顶部：550px；/*图表区域顶部*/
左：10px/*图表区域左*/
}

全部的
非洲
美洲
欧洲
亚洲
威伊
电池组
包装

div按定义是默认情况下占100%宽度的块元素。尝试将他们的

显示

属性更改为

内联块

@sn3ll your make my day！谢谢