如何围绕不均匀的内容包装div

Question

我有一个谷歌地图应用程序，其中绝对定位的容器div包含两个不同高度的浮动div，它位于地图上。我无法在两个浮动的内部div周围包裹容器div，并且在第一个较小的内部div下面消除了额外的非包装div空间。我想我需要让容器div包围它的内容。

这是Fiddle。我试图摆脱小提琴中多余的黄色空间，落在第一个内部div下方，蓝色背景     div.container     {     显示：块;     背景颜色：黄色;     颜色：黑色;     位置：绝对;     边框：2px纯蓝色;     z-index：600;     }

div.content1
{
width:20px;
height: 30px;
display:inline-block;
background-color: #4b6c9e;
color:White;
position: relative;
border:2px solid white;
z-index: 700;
float:left;
}

div.content2
{
width:250px;
height: 400px;
display:inline-block ;
background-color:Gray;
color:White;
position: relative;
border: 2px solid red;
z-index: 699;
float:right;
}

<div class="container">
<div class="content1">
<p>+</p>
</div>
<div class="content2">
<p>some content here</p>
</div>
</div>