将div与嵌入式地图并排放置并隐藏

Altimus Prime

如何将地图和标题并排放置？我不在乎标题是否以窄屏降到了下面，但是否则它们确实应该并排放置。我什至会提出其他布局建议。

关于并排放置div有很多问题和答案，在阅读并尝试了许多div之后，我仍然无法正常使用它。到目前为止，这就是我所拥有的。

的CSS

.map_and_caption
{
    width: 700px;
    height: 200px;
    margin: auto;
    padding: 10px;
    display: inline-block;
}

.map
{
    width:470px;
    overflow:hidden;
    margin-left:5px;
    margin-right:auto;
}

.caption
{
    width:230px;
    margin-left: 15%;
    height: 200px;
    float: right;
}

的HTML

<div class="map_and_caption">
    <div class="map">
        <iframe src="https://www.google.com/maps/embed" width="800" height="300" frameborder="0" style="border:0"></iframe>
    </div>
    <div class="caption">
        <h2>Best Price, Great Location</h2>
        <p>We are located inside of the office of Dr. Joe Shmo and a Happy Place. With a comfortable atmosphere we attend you with the warmth of a Happy Place and the professionality of a medical office.</p>
    </div>
</div>

贴纸

主要问题是容器的宽度不足以容纳两个元素，我还简化了CSS代码。

http://jsfiddle.net/uun9hyfg/2/

.map_and_caption {
    width: 700px;
    height: 200px;
    margin: auto;
}
.map {
    width:470px;
    float: left;
    margin-right: 30px;
}
.caption {
    width:200px;
    float: left;
}
.map iframe {
    max-width: 100%
}