Floating Bug In Browsers

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 -->

---

Get rid of the negative top margin (bad coding) and remove the position: relative. Then put a 1px border on your #call_now div and also on the div you have floating on the left - you will probably find that they overlap and that is why you #call_now div is being pushed to the bottom of the page. If that is the case, remove the borders and reset the widths of both floated elements so that they can fit alongside each other.

Thank you that fixed the issue.