just got a question regarding relative & absolute positioning and applying clearfix to the main container cos I've written the code and it's not behaving as I expected.

Structure-wise this is a simple page about product history. nav-bar with drop-down menu at the top across the screen, then a big hero image across the screen, followed by a few paragraphs and a simple footer, that's it. 

here's my problem:
I need to put 3 components in the hero image area - the hero image itself, one title word on the top left corner and one logo on the top right corner. What I've done is: I created a div and used the hero image as background image. I set the position value of the div to relative. I created another div to hold the title word and set the position to absolute, using top and left to give it a location. Following the same logic, I created another div to hold the logo and set it to float right, with position set to absolute and top and right to give a location. I've applied clearfix to the main div and everything looks ok on my screen (resolution 1280 x 1024) until I saw it on the wide screen(1680 x 1050) --- the logo is not on the hero image! It's to the right side of the hero image. 

What caused this? I thought by putting 2 divs inside the main div and applying clearfix, the three will "get together" and act as one and won't separate... Is it because I haven't written any code for responsive layout? Or was it because I shouldn't have used the hero image as the background? Would this problem be solved if I used z-index instead to specify the stack order of hero image, logo and title word? 

Below is my code and any help would be much appreciated!

```
<div id="history-content" class="clearfix">
    <div id="history-image-text">HISTORY</div>
    <div id="stamp">
        <img src="./images/logo.png">
    </div>
</div>

#history-content {
    background-image: url('./images/heroimage.jpg');
    min-height: 307px;
    background-repeat: no-repeat;
    position: relative;
}

#history-image-text {
    color: #fff;
    position: absolute;
    top: 20px;
    left: 50px;
    font-size: 20px;
    font-weight: bold;
}

#stamp img {
    width: 10%;   /*not sure I'm doing the right thing here either*/
    height: 40%;  /*not sure I'm doing the right thing here either*/
    float: right;
    position: absolute;
    right: 100px;
    top: 20px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    line-height: 0;
}

```