I am designing a responsive web page. Actually what's happening is though i am setting the width of my header and wrapper with the screen size still I guess it is taking more space due to which a horizontal scroll bar appears down the screen and also the position of buttons are varying from display to display though i am taking the screen size px Here is the code
$(document).ready(function(){
var a=window.screen.availWidth;
var b=(0.20 * window.screen.availHeight);
var c=(0.60 * window.screen.availHeight);
$("#header").css("background-color","#009acd");
$("#header").css("height",b);
$("#header").css("width",a);
$("#header").css("position","relative");
$("#wrapper").css("background-color","#FFFFFF");
$("#wrapper").css("width",a);
$("#wrapper").css("height",c);
$("#wrapper").css("position","relative");
$("#logo1").css("position", "absolute");
$('#logo1').css("top","5%");
$('#d11').css("position","absolute");
$('#d11').css("top","75px");
$('#d11').css("left","310px");
$('#d11').css("color","#FFFFFF");
$('#marquee').css("position","absolute");
$('#marquee').css("top","-15px");
$('#marquee').css("left","300px");
$('#marquee').css("color","#FFFFFF");
$('h1').css("color","#FFFFFF");
$('h3').css("position","absolute");
$('h3').css("top","90px");
$('h3').css("left","1000px");
$('h3').css("color","#FFFFFF");
$('h2').css("position","absolute");
$('h2').css("top","60px");
$('h2').css("left","1075px");
$('h2').css("color","#FFFFFF");
/* $('#d12').css("position","absolute");
$('#d12').css("top","65px");
$('#d12').css("left","950px");
$('#d12').css("color","#FFFFFF");*/
$('#css3menu1').css("position", "absolute");
$('#css3menu1').css("bottom","17px");
$('#css3menu1').css("left","310px");
$('#videos').css("position", "absolute");
$('#videos').css("top","0px");
$('#videos').css("left","22px");
$('#studymaterial1').css("position", "absolute");
$('#studymaterial1').css("top","148px");
$('#studymaterial1').css("left","32px");
$('#downloads').css("position", "absolute");
$('#downloads').css("top","315px");
$('#downloads').css("left","22px");
$('#wowslider-container1').css("left","233px");
$('#wowslider-container1').css("top","1000px");
$('.formoid-solid-blue').css("position","absolute");
$('.formoid-solid-blue').css("left","912px");
$('.formoid-solid-blue').css("top","12px");
});
HTML code
<body>
<div id="header">
<div id="logo1">
<img src="images/logo.jpg" alt="logo"></img>
</div>
<div>
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="#"
style="height: 18px; line-height: 18px;">Home</a></li>
<li class="topfirst"><a href="#"
style="height: 18px; line-height: 18px;"><span>FAQs </span></a></li>
<li class="topfirst"><a href="#"
style="height: 18px; line-height: 18px;"><span>Videos </span></a></li>
<li class="topfirst"><a href="#"
style="height: 18px; line-height: 18px;"><span>Study
Materials</span></a></li>
<li class="topfirst"><a href="#"
style="height: 18px; line-height: 18px;"><span>Downloads</span></a></li>
</ul>
</div>
<div id="marquee">
<marquee>
<a href="#" ><h1>I have a QUERY????? I have a QUERY????? I have a QUERY?????</h1></a>
</marquee>
</div>
<div id="d11">
<h1>WELCOME TO ULLASUCHIL.COM</h1>
</div>
<div id="d12">
<h2 align="right">
ULLAS UCHIL</h2><h3 align="right">DEVELOPMENT OFFICER<br>+91 98195 63458<br>ullasuchil@licindia.com</h3>
</div>
</div>
<div id="wrapper">
<div id="videos">
<img src="images/videos.png" alt="videos"></img>
</div>
<div id="studymaterial1">
<img src="images/studymaterial1.png" alt="studymaterials"></img>
</div>
<div id="downloads">
<img src="images/downloads.png" alt="downloads"></img>
</div>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/photo_20160218_183940.jpg"
alt="photo_2016-02-18_18-39-40" title="photo_2016-02-18_18-39-40"
id="wows1_0" /></li>
<li><img src="data1/images/photo_20160218_183950.jpg"
alt="photo_2016-02-18_18-39-50" title="photo_2016-02-18_18-39-50"
id="wows1_1" /></li>
<li><img src="data1/images/photo_20160218_183956.jpg"
alt="photo_2016-02-18_18-39-56" title="photo_2016-02-18_18-39-56"
id="wows1_2" /></li>
<li><img src="data1/images/photo_20160218_184006.jpg"
alt="photo_2016-02-18_18-40-06" title="photo_2016-02-18_18-40-06"
id="wows1_3" /></li>
<li><img src="data1/images/photo_20160218_184014.jpg"
alt="photo_2016-02-18_18-40-14" title="photo_2016-02-18_18-40-14"
id="wows1_4" /></li>
<li><img src="data1/images/photo_20160218_184020.jpg"
alt="photo_2016-02-18_18-40-20" title="photo_2016-02-18_18-40-20"
id="wows1_5" /></li>
<li><img src="data1/images/photo_20160218_184028.jpg"
alt="photo_2016-02-18_18-40-28" title="photo_2016-02-18_18-40-28"
id="wows1_6" /></li>
<li><img src="data1/images/photo_20160218_184035.jpg"
alt="photo_2016-02-18_18-40-35" title="photo_2016-02-18_18-40-35"
id="wows1_7" /></li>
<li><img src="data1/images/photo_20160218_184045.jpg"
alt="photo_2016-02-18_18-40-45" title="photo_2016-02-18_18-40-45"
id="wows1_8" /></li>
<li><img src="data1/images/photo_20160218_184054.jpg"
alt="photo_2016-02-18_18-40-54" title="photo_2016-02-18_18-40-54"
id="wows1_9" /></li>
<li><img src="data1/images/photo_20160218_184059.jpg"
alt="photo_2016-02-18_18-40-59" title="photo_2016-02-18_18-40-59"
id="wows1_10" /></li>
<li><img src="data1/images/photo_20160218_184113.jpg"
alt="photo_2016-02-18_18-41-13" title="photo_2016-02-18_18-41-13"
id="wows1_11" /></li>
<li><img src="data1/images/photo_20160218_184121.jpg"
alt="photo_2016-02-18_18-41-21" title="photo_2016-02-18_18-41-21"
id="wows1_12" /></li>
<li><a href="http://wowslider.com/vf"><img
src="data1/images/photo_20160218_184129.jpg"
alt="full screen slider" title="photo_2016-02-18_18-41-29"
id="wows1_13" /></a></li>
<li><img src="data1/images/photo_20160218_184140.jpg"
alt="photo_2016-02-18_18-41-40" title="photo_2016-02-18_18-41-40"
id="wows1_14" /></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="photo_2016-02-18_18-39-40"><img
src="data1/tooltips/photo_20160218_183940.jpg"
alt="photo_2016-02-18_18-39-40" />1</a> <a href="#"
title="photo_2016-02-18_18-39-50"><img
src="data1/tooltips/photo_20160218_183950.jpg"
alt="photo_2016-02-18_18-39-50" />2</a> <a href="#"
title="photo_2016-02-18_18-39-56"><img
src="data1/tooltips/photo_20160218_183956.jpg"
alt="photo_2016-02-18_18-39-56" />3</a> <a href="#"
title="photo_2016-02-18_18-40-06"><img
src="data1/tooltips/photo_20160218_184006.jpg"
alt="photo_2016-02-18_18-40-06" />4</a> <a href="#"
title="photo_2016-02-18_18-40-14"><img
src="data1/tooltips/photo_20160218_184014.jpg"
alt="photo_2016-02-18_18-40-14" />5</a> <a href="#"
title="photo_2016-02-18_18-40-20"><img
src="data1/tooltips/photo_20160218_184020.jpg"
alt="photo_2016-02-18_18-40-20" />6</a> <a href="#"
title="photo_2016-02-18_18-40-28"><img
src="data1/tooltips/photo_20160218_184028.jpg"
alt="photo_2016-02-18_18-40-28" />7</a> <a href="#"
title="photo_2016-02-18_18-40-35"><img
src="data1/tooltips/photo_20160218_184035.jpg"
alt="photo_2016-02-18_18-40-35" />8</a> <a href="#"
title="photo_2016-02-18_18-40-45"><img
src="data1/tooltips/photo_20160218_184045.jpg"
alt="photo_2016-02-18_18-40-45" />9</a> <a href="#"
title="photo_2016-02-18_18-40-54"><img
src="data1/tooltips/photo_20160218_184054.jpg"
alt="photo_2016-02-18_18-40-54" />10</a> <a href="#"
title="photo_2016-02-18_18-40-59"><img
src="data1/tooltips/photo_20160218_184059.jpg"
alt="photo_2016-02-18_18-40-59" />11</a> <a href="#"
title="photo_2016-02-18_18-41-13"><img
src="data1/tooltips/photo_20160218_184113.jpg"
alt="photo_2016-02-18_18-41-13" />12</a> <a href="#"
title="photo_2016-02-18_18-41-21"><img
src="data1/tooltips/photo_20160218_184121.jpg"
alt="photo_2016-02-18_18-41-21" />13</a> <a href="#"
title="photo_2016-02-18_18-41-29"><img
src="data1/tooltips/photo_20160218_184129.jpg"
alt="photo_2016-02-18_18-41-29" />14</a> <a href="#"
title="photo_2016-02-18_18-41-40"><img
src="data1/tooltips/photo_20160218_184140.jpg"
alt="photo_2016-02-18_18-41-40" />15</a>
</div>
</div>
<div class="ws_shadow"></div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</div>
<div>
<script type="text/javascript"
src="formoid_files/formoid1/jquery.min.js"></script>
<form class="formoid-solid-blue"
style="background-color: #FFFFFF; font-size: 14px; font-family: 'Roboto', Arial, Helvetica, sans- serif; color: #34495E; max-width: 980px; min-width: 335px; max-height: 600px; min-height: 440px"
method="post">
<div class="title">
<h2>Register</h2>
</div>
<div class="element-input">
<label class="title"><span class="required"></span></label>
<div class="">
<b><font color="black">Name</font></b><input class="large"
type="text" name="input" required="required" placeholder="Name" /><span
class=""></span>
</div>
</div>
<div class="">
<label class="title"><span class="required"></span></label>
<div class="">
<b><font color="black">Contact</font></b><input class="large"
type="text" name="input1" required="required"
placeholder="Contact" /><span class="icon-place"></span>
</div>
</div>
<div class="">
<label class="title"><span class="required"></span></label>
<div class="item-cont">
<b><font color="black">Email</font></b><input class="large"
type="text" name="input2" required="required" placeholder="Email" /><span
class=""></span>
</div>
</div>
<div class="element-select">
<label class="title"><span class="required"></span></label>
<div class="item-cont">
<div class="large">
<b><font color="black">Location</font></b><span><select
name="select" required="required">
<option value="Mumbai">Mumbai</option>
<option value="Navi Mumbai">Navi Mumbai</option>
<option value="Thane">Thane</option>
<option value="Kalyan">Kalyan-Dombivali</option>
<option value="Dahisar">Mira Road-Virar</option>
<option value="Rest of India">Rest of India</option>
</select><i></i><span class="icon-place"></span></span>
</div>
</div>
</div>
<div class="submit">
<input type="submit" value="Submit" />
</div>
</form>
<script type="text/javascript"
src="formoid_files/formoid1/formoid-solid-blue.js"></script>
</div>
</div>