unable to place nested div next to another div in html css

Question

i have 4 Div Which is

1. Main Content Div
2. Inside Main Content Div i have another div which is for shadow
3. inside main Another div

My Question: I want to place two div next to each other. i really dont know what is going wrong with me

Here is my HTML

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

Here is my 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

MY GOAL:

Answer 1

Because you want two elements to overlay another, you'll need to position them absolutely. You could avoid this by making them children of the larger element.

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

Demo