css {right:0; position:absolute;} element should not displace when browser resized [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 9 years ago.

Improve this question

The element with this property is displaced when browser is re sized. What property should i use to prevent the element getting displaced along with the browser, and still it has to be in the right end as given?

.cssclass
{
    position:absolute;
    right: 0px;
}

example here

Answer 1

how about this : FIDDLE

html:

<div class="bottom_banner">HELLO</div>

css:

body{
    position:relative;
    height:2000px;
    background:navy;
    padding:0;
    margin:0;
}
.bottom_banner{
    position:absolute;
    width:100%;
    height:50px;
    bottom:0;
    background:red;
    margin:0;
}

EDIT:

here is an example for a fixed-width page with a banner stuck on bottom right of the page: FIDDLE

html:

<div class="content">
    <div class="right_banner"> Sup?</div>
</div>

css:

body{
    background:#99cccc;
}
.content{
    position:relative;
    width:400px;
    margin:0 auto;
    background:white;
    box-shadow:0 0 10px;
    height:2000px;
    border-radius:5px;
}
.right_banner
{
    position:absolute;
    width:150px;
    height:50px;
    background:#cc99ff;
    right:0;
    bottom:0;
    color:navy;
    border:1px solid black;
    opacity:0.8;
    border-radius:5px;
}