0

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;
}
2
Contributors
2
Replies
13
Views
1 Year
Discussion Span
Last Post by best4earn
1

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?

Edited by gentlemedia

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.