无法将嵌套div放在html css中的另一个div旁边

Question

我有4个Div这是

1. 主要内容Div
2. Inside Main Content Div我有另一个div for shadow
3. inside main Another div

我的问题： 我想把两个div放在一起。我真的不知道我出了什么问题

这是我的HTML

div id="Maincontent">
<div id="contentshadow" class="shadowCls"></div>
<div id="contentimg"> </div>
<div id="FindHotel"> </div>

这是我的Css

#contentshadow.shadowCls {
    border:2px solid;
    transform:rotate(-5deg);
    box-shadow:10px 10px 5px #888888;
    height: 475px;
    width: 100%;
    color: Yellow;
    float:right;
    }
#contentimg{
    border: 2px solid #F6C;
    transform: rotate(0deg);
    margin-top: 5px;
    width: 58%;
    height: 200px;
}
#FindHotel{
    border:2px #9FF solid;
    width:35%;
    height:200px;
    margin-left:60%;
    margin:right:0;
    margin-bottom:20%;
}
#Maincontent{
    border: 2px solid;
    margin-left:90px;
    width: 80%;
    height: 475px;
    color: Green;

    }

Demo

我的目标：

Answer 1

因为你想要两个元素叠加另一个元素，你需要绝对定位它们。你可以通过让他们成为更大元素的孩子来避免这种情况。

#contentimg {
    ...
    width: 42%;
    position: absolute;
}
#FindHotel {
    ...
    margin-left: 43%;
    position: absolute;
    margin-top: 5px;
}

<强> Demo