背景颜色和样式未正确显示

Question

请查看我的网站http://kaniamea.com/2/我试图在三个景点框后面正确显示内容区域。我的css是：

#attractions {
    width: 290px;
    height: auto;
    display: block;
    padding-right: 20px;
    float: left;
}

这是我主容器的代码：

#main {
    margin: 10px auto 0px;
    width: 950px;
    max-width:100%;
    background: none repeat scroll 0% 0% #FBFBFB;
    padding: 10px;
    background-color: #FFF;
    border: 2px solid #FFF;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

当我删除float：left;来自#attractions并将其替换为display：inline-block;它工作但我需要找出另一个解决方案与浮动：左;所以这将在移动设备上正确浮动。还有另一种方法可以让内容区域样式出现在框后面吗？