Untitled

<!DOCTYPE html>

<HTML>
    <HEAD>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </HEAD>
    <STYLE>
#wrapper {
    color: black;
    background-color: #D8D8D8;
    width: 1280px; /* Breite des Inhaltsbereichs */
    height: 800px;
    margin-top: 10px;
    margin-right: auto; /* Abstand rechts */
    margin-bottom: 10px;
    margin-left: auto; /* Abstand links */

}
#imageBox{
    display: inline-block;
    background-color: #2EFE2E;
    width: 500px;
    height: 500px;
    margin-top: 100px;
    margin-left: 50px;
}
#pyramidBox{
    display:inline-block;
    background-color: #2E2EFE;
    width: 550px;
    height:650px;
    margin-top: 100px;
    margin-right: 50px;
    bottom: 0px;
    float: right;
}
#resultBox{
    display: inline-block;
    position: absolute;
    background-color: #FF0000;
    width: 300px;
    height: 100px;
    margin-right:auto;
    margin-left:auto;
    bottom: 0;


}
    </STYLE>

    <BODY>
        <div id="wrapper">
            <div id="imageBox">

            </div>
            <div id="pyramidBox">

            </div>
            <div id="resultBox">

            </div>


        </div>


    </BODY>


</HTML>