Member Avatar for 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;
}
  • 2 Contributors
  • 2 Replies
  • 205 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by best4earn
Member Avatar for 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?

Edited by gentlemedia
Member Avatar for best4earn

i just remove other properties and now its resold

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.