Jackie Jackie - 4 months ago 8
HTML Question

HTML Floating is not properly offset

This is the outcome of the code.It should be left and right but the right one is going below.

This is my code :

<!-- footer begin -->
<footer>
<div >
<div class="row">
</div>
<div >
<span style="font-size: 20px; color: #FFFFFF; line-height: 1.5;">Follow Us</span>
<div class="textwidget"><div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=106803696083496";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/LedinMalaysia" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/LedinMalaysia"><a href="https://www.facebook.com/LedinMalaysia">LedinMalaysia</a></blockquote></div></div></div>
</div>
</div><!-- end col-lg-3 -->
<div class="col-md-4 col-sm-4" style="float: right;">
<span style="font-size: 20px; color: #FFFFFF;">Contact Us</span> <div class="textwidget"><address>
<span><strong>Address: </strong> 14, Jalan Klang Sentral 2/KU5, Klang Sentral, 41050 Klang, Selangor</span>
<span><strong>Phone: </strong> 03-3341 3227 / 03-3358 5990</span>
<span><strong>Email: </strong><a href="mailto:sales@ledinmalaysia.com"> sales@ledinmalaysia.com</a></span>
<span><strong>Web: </strong><a target="_blank" href="http://www.ledinmalaysia.com"> wwww.ledinmalaysia.com</a></span>
</address></div>
</div>



<div >
<div class="container">
<div class="row">
</div>
<div >
<div class="social-icons">
<a target="_blank" href="https://www.facebook.com/LedinMalaysia"><i class="fa fa-facebook"></i></a>

</div>
</div>

</div>
</div>

</footer>
<!-- footer close -->


If can i want it to be something like this.
Left and right equal

I've tried position absolute i get the facebook class becomes a smaller box.

Answer

To set the position of two div left and right, you need to give the first div float: left; as well as float: right; that you gave to the second one. And to make the two divs having same amount of size, i put width: 50% to both div. check the snippet and i hope this would help. (by the way, your a link happens to be shown too slowly).

<!-- footer begin -->
<footer>
  <div style="float: left;width: 50%;">
    <div class="row"></div>
    <div>
      <span style="font-size: 20px; color: #FFFFFF; line-height: 1.5;">Follow Us</span>
      <div class="textwidget">
        <div id="fb-root"></div>
        <script>
          (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=106803696083496";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));

        </script>

        <div class="fb-page" data-href="https://www.facebook.com/LedinMalaysia" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
          <div class="fb-xfbml-parse-ignore">
            <blockquote cite="https://www.facebook.com/LedinMalaysia">
              <a href="https://www.facebook.com/LedinMalaysia">LedinMalaysia</a>
            </blockquote>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end col-lg-3 -->
  <div class="col-md-4 col-sm-4" style="float: right;width: 50%;">
    <span style="font-size: 20px; color: #FFFFFF;">Contact Us</span>
    <div class="textwidget">
      <address>
					<span><strong>Address: </strong> 14, Jalan Klang Sentral 2/KU5, Klang Sentral, 41050 Klang, Selangor</span> <span><strong>Phone: </strong> 03-3341 3227 / 03-3358 5990</span> <span><strong>Email:
					</strong><a href="mailto:sales@ledinmalaysia.com"> sales@ledinmalaysia.com</a></span> <span><strong>Web: </strong><a target="_blank" href="http://www.ledinmalaysia.com"> wwww.ledinmalaysia.com</a></span>
				</address>
    </div>
  </div>
  
  <div>
    <div class="container">
      <div class="row"></div>
      <div>
        <div class="social-icons">
          <a target="_blank" href="https://www.facebook.com/LedinMalaysia"><i class="fa fa-facebook"></i></a>

        </div>
      </div>

    </div>
  </div>

</footer>
<!-- footer close -->

Comments