Width 100% - pixel

by Faisal Khan Janjua

HTML

<div id="marquee-scroller-inner">
  <div id="forex">
    <span>Forex Rates are:</span>
  </div>
  <marquee class="marquee-block" behavior="left" scrollamount="3" direction="left"><span style="margin-right:15px;">AFN/PKR = 1.57</span><span style="margin-right:15px;">USD/PKR = 104.65</span><span style="margin-right:15px;">GBP/PKR = 131.9</span><span style="margin-right:15px;">EUR/PKR = 112.43</span><span style="margin-right:15px;">JPY/PKR = 0.91</span><span style="margin-right:15px;">CHF/PKR = 104.96</span><span style="margin-right:15px;">SEK/PKR = 11.87</span><span style="margin-right:15px;">CAD/PKR = 79.75</span><span style="margin-right:15px;">SAR/PKR = 27.91</span> </marquee>
</div>



<div class="main">
  <div class="left">Box 1</div>
  <div class="right">Box 2</div>
</div>

CSS

#forex{
  float:right;
  background:#F99;
}
marquee{
  float:right;
  background:#99F;
}


.main{
  float: left;
  width:90%;
  padding:20px;
  background:#F9F;
  margin-top:20px
}
.left{
  width:60px;
  float:left;
  background:#F99;
}
.right{
  float:right;
  background:#FF9;
}

JavaScript

jQuery(document).ready(function(){

  jQuery('#forex').css("width", "auto");
  jQuery('#marquee-scroller-inner .marquee-block').css('width', '100%');
  var forxwidth = (jQuery('#forex').width())+8;
  var w100 = (jQuery("#marquee-scroller-inner .marquee-block").width())-forxwidth;
  jQuery('#marquee-scroller-inner .marquee-block').css('width', w100);


  $('.right').css('width', '100%').css('width', '-=60px');
  $(window).on('resize', function(){
    $('.right').css('width', '100%').css('width', '-=60px');
  });

});