CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9235

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

Upvotes: 0

Views: 60

Answers (3)

patmacs
patmacs

Reputation: 91

It might be best to place your '#weather' element inside of your '#wrapper .shell' area of the dom and give it an 'position: absolute' property.

'position: absolute' basically tells the browser to ignore the element's height and instead hands all display responsibility off to the css that you define for it.

Also, You can make it look a lot nicer by setting the '#weather' width to 990px (The width of your site's frame). This will extend the black bar across the width of your site's frame as well. This will begin to clean things up for you.

Upvotes: 1

Praveen Dabral
Praveen Dabral

Reputation: 2509

You can give a relative or absolute position to it.

Upvotes: 1

Linus Caldwell
Linus Caldwell

Reputation: 11078

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 */
}

Upvotes: 2

Related Questions