What can be used instead of the absolute position?

Hello,

I am showing hide/show login panel on the top of the page(exactly right side like a twitter) and my problem is screen resolution. In the small screen (1024768) this link shows properly but when i see it in the big screen (1600683) it goes far away(on the right side) from the exact position.

Here is my code-


#login-link{
	    position: absolute;
	    top: 0px;
	    right: 0px;
	    display: block;
	    background: #17B5F2;
	    padding: 5px 15px 5px 15px;
	    margin: 130px 30px 0 0;
	    
	    	
	}
	#login-panel{
	    position: absolute;
	    top: 24px;
	    right: 0px;
	    width: 190px;
	    padding: 10px 15px 5px 15px;
	    background: url(../images/login-bg2.gif);
	    border:6px solid #17B5F2;
	    font-size: 8pt;
	    font-weight: bold;
	    color: #FFF;
	    display: none;
	    
	    margin: 130px 30px 0 0;
	    z-index:5;
      }

Can anyone please tell me how can i make this work in big screen resolution as well?

Thanks in advance.

Here is my whole code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create a sliding Login box with CSS and jQuery</title>
<!-- Demo Styles -->
<style type="text/css">
#demo-header{
	    width: 980px;
	    margin: 0 auto;
	    position: relative;
	}
	#login-link{
	    position: absolute;
	    top: 0px;
	    right: 0px;
	    display: block;
	    background: #17B5F2;
	    padding: 5px 15px 5px 15px;
	    margin: 130px 30px 0 0;
	    	
	}
	#login-panel{
	    position: absolute;
	    top: 24px;
	    right: 0px;
	    width: 190px;
	    padding: 10px 15px 5px 15px;
	    background: url(../images/login-bg2.gif);
	    border:6px solid #17B5F2;
	    font-size: 8pt;
	    font-weight: bold;
	    color: #FFF;
	    display: none;
	    
	    margin: 130px 30px 0 0;
	    z-index:5;
      }
	label{
	    line-height: 1.8;
	    color:#2F2F2F;
	    float:left;
	    margin:0 0 0 2px;
	    xborder:1px solid #000;
	}
	
	#header #sub-header #sec-sub-header #reg-with-us a { line-height:38px; text-indent:7px; margin: 50px 30px 0 0;
 padding:0 0 0 10px; display:block; text-decoration:none; color:#fff; font-style:italic; font-size:15px; }
/****** Ends ***/


</style>
<!-- Demo Scripts -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
 jQuery(document).ready(function($) {

	$("#login-link").click(function(){
		$("#login-panel").slideToggle(200);
	})
})
$(document).keydown(function(e) {
	if (e.keyCode == 27) {
		$("#login-panel").hide(0);
	}
});

</script>

</head>
    <body>

<div id="demo-header">
    <div id="reg-with-us"><a href="" title="">Register </a></div>
    <div id=""><a href="" title="">Career</a></div>

    <a id="login-link" href="#login" title="Login">Clients Area</a>
<div id="login-panel">
<form action="" method="post">
<p>
<label>Username:
<input name="username" type="text" value="" />
</label> <br />
<label>Password:
<input name="password" type="password" value="" />
</label><br /><br />

<input type="submit" name="submit" value="Sign In" />
<small>Press ESC to close</small>
</p>
</form>
</div><!-- /login-panel -->

    </body>
</html>

I want to use this hide/show panel after the image i am having in my header. I have few links besides this panel. so when i checked in the 1024768 resolution , all these links are working properly. but same code with 1600683 resolution panel’s shifting in the right side. :frowning:

Any help?

Hi,

I’'m a little confused because looking at your code the panel is within #demo-header and therefore the panel will always be at the right of #demo-header no matter what the screen resolution is.

It will always appear at the right of that 960px element because position:relative creates the stacking context for the absolutely placed panel.

We may need to see your actual page unless you can clarify what is happening as I don’t see any difference depending on screen res because of the fixed widths used.