Float a DIV in CSS


I have the following URL: Website

What I am looking to do really is float the Weather DIV on top of the page just like it is now, but when i expand or collapse it, it just floats on top and does not push any of the contents down. How do I achieve it?

My weather DIV CSS:

#weather {
    margin: 0 auto;
    padding: 0;
    width: 177px;
    font: 75%/120% Arial, Helvetica, sans-serif;
    top: 0;
    position: relative;
    z-index: 999999999;

Position it absolutely

#weather {
    position: absolute;
    left: 50%;
    width: 177px;
    margin-left: -88px; /* 50% of the width */

and give your body a padding-top in the height of your current wrapper

body {
    padding-top: 50px; /* or so */