CODEWITHSUNDEEP
jquerycss
Overmars
Overmars

Reputation: 41

Making a DIV stay in the upper right corner against the browser window. It should stay there and never move even when the window is re-sized?

This is the code:

<style type="text/css">
body{
    margin: 0;
    padding: 0;
}

#container{
    background-color: #060;
    width: 1006px;
    margin: 0 auto;;
    height: 700px; /*HEIGHT GIVEN FOR DEMOSTRATION PERPOSES ONLY.*/
}

#mainContent{
    background-color: #CCC;
    width: 960px;
    margin: 0 auto;;
    height: 400px; /*HEIGHT GIVEN FOR DEMOSTRATION PERPOSES ONLY.*/
}

#ad{
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #F90;
    width: 200px;
    height: 200px;
    z-index: 1000;
}

</style>
</head>

<body>
    <div id="ad">
    </div>

    <div id="container">

        <div id="mainContent">
        </div>

    </div>
</body>

I am trying to placed a div containing an ad on the top of a page. I need this div to be in the top right corner against the walls of the browser right and top window.

I have managed to do this by making the DIV absolute positioned, give it a 0px Right and top placement. So it sits there perfectly.

Here is the problem:

When you minimized the browser window, the div scrolls with the page and have a big space behind it, depending how small you make the window.

To work around this, I change the DIV's width to 100 percent and place the ad image in the background positioned top right. I am thinking because the DIV is 100 percent and hit's the walls of the window, it will shrink and grow according to the window size and the image will stay put in the right corner. Not happening.

Does anyone have an idea about how I can make this DIV stay in the upper right corner against the browser window. It should stay there and never move even when the window is re-sized?

Upvotes: 4

Views: 6900

Answers (2)

Refilon
Refilon

Reputation: 3499

Is this what you mean?

position: fixed is good.

http://jsfiddle.net/cDNr5/

Regards, Dennis

Upvotes: 1

user578895
user578895

Reputation:

use fixed positioning:

position : fixed;
top      : 0px;
right    : 0px;

Upvotes: 5

Related Questions