I have an aside called #call_now which i have floated right with another area to left. The problem is #call_now was going to the bottom of the page so i applied css positioning to move #call_now to the top of the page. I was able to get #call_now to the top of the page however margin is different in each browser in other words in IE #call_now is further to the top than in Firefox or Chrome. Is there away to get this to work in all browsers without have to have separate style sheets for the various browsers?

CSS:
Code:
#call_now {
  float: right;
  margin-right: 25px;
  width: 209px;
  position: relative;
  height: 384px;
  margin-top: -715px;
  background: #fff;
}
html:
Code:
 
    <aside id="call_now">
    		<p class="callnow">Call Now!</p>
    		<p class="number">1-888-518-0690</p>
    		<p class="center_txt">or</p>
    		<p class="blue">let us call you</p>
    		<p class="callnow_txt">
    		Simply fill out the form<br>
    		below and one of our<br>
    		experts will cal you</p>
    		<img src="img/call_now.png" alt="Call Now! Or Let Us Call You">
    		
      		<form id="content_form">
      			<p>
    	  			<label class="block">
    	  				<input type="text" id="firstName" class="normal" type="firstName" autocomplete="on" value="first name">
    	  			</label>
    	  			<label class="block">
    	  				<input type="text" id="lastName" class="normal" type="lastName" autocomplete="on" value="last name">
    	  			</label>
    	  			<label class="block">
      				  	<input type="text" id="phone" class="normal" type="phone" autocomplete="on" value="phone">
    	  			</label>
    	  			<label class="block">
    		  			<input type="text" id="zip" class="normal" type="zip" autocomplete="on" value="zip code">
    	  			</label> 
    	  			<button type="submit" id="submit" class="normal" value="submit" title="submit">submit</button>
      			</p>
    	  	</form><!-- end content_form -->
    	</aside> <!-- end call_now -->