Problem on Resolution Changing

[best4earn]

Its showing same result 1280800 and above but when i change screen resolution to low like 1024768 class="right" goes down. how can i fix this . Testing screen resoluition at http://quirktools.com/screenfly/#u=http%3A//www.design.earnandearn.com/&w=1280&h=800&a=1

<div class="slider-bg">      
                    <div class="container">
<div>
    <div class="left">
<h3>Making Money the Easy Way in</h3>
<h2>Our Social Network</h2>
<p>
    Achieve your dream for the financial freedom<br>
        Earn money Anywhere and Anytime
    </p>
            <a class="btn btn-warning" href="/index.php?view=register">Signup Now !</a>
                        </div>
    <div class="right"></div>
</div>
                  </div>
                  </div>


            ---------My Css----------

.left { float: left; margin: 0 .5em .5em 0; }
.right { float: right; margin: 0 0 .5em .5em;
height: 415px;
  width: 542px;
  background-image: url(../img/grownstar-custom/man.png);
  background-repeat: no-repeat;
  top: 1px; }

.slider-bg {
  background-image: url("../img/grownstar-custom/slider_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 6px solid #E1B706;
  height: 415px;
}
.container {
  height: 415px;
  max-width: 1030px;
  margin: 0 auto;
}

.left h3 {
  font-size: 27px;
  color: #6e8d30;
  margin-top: 60px;
  font-weight: 600;
}
.left h2 {
  color: #7b33ad;
  font-size: 48px;
  font-weight: 500;
}
.left p {
  font-size: 20px;
  margin-top: 20px;
  line-height: 1;
  margin-bottom: 15px;
}
.left a.btn {
  background: none repeat scroll 0 0 #bae23d;
  color: #000;
  text-shadow: 0 1px 1px #000000;
  font-size: 18px;
  font-weight: 600;
  margin-top: 15px;
  margin-left: 0;
  border: none;
  width: 150px;
}

[gentlemedia]

Those left and right classes were I asume helper classes to reuse them if you need to float HTML elements, so don't put any other css properties in it. Just only the float and margin properties.

Your issue is the right foated div is dropping to the next line, because there is below 1024px simply no room anymore to have it next to the left floated div. Why not just integrate in Ps that man.png into that slider background image?

[best4earn]

i just remove other properties and now its resold