Home/ Questions/Q 3220790
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T15:48:06+00:00

I have the following code <div id=header class=row> <ul id=topnav> <li> <a href=#>a</a> <span><a

  • 0

I have the following code

<div id="header" class="row">
    <ul id="topnav">
        <li>
            <a href="#">a</a>
            <span><a href="#">aa</a> <a href="#">ab</a></span>            
        </li>
        <li>
            <a href="#">b</a>
            <span><a href="#">ba</a> <a href="#">bb</a></span>
        </li>
        <li style="float: right;"><a href="#">Login</a></li>
    </ul>

    <div id="login_container">
        <form method="post" id="login_form">
            <table>login form</table>
        </form>

        <form method="post" id="create_account_form">
            <table>create account form</table>
        </form>
    </div>    
</div>

<div id="content">
content here
</div>

The header is about 60px tall and 960px wide, centered in the browser window and sticking to the top of the viewport. When the user clicks on “Login” the #login_container reveals itself. However, I want to position it aligned right with the header row, not aligned to the right of the viewport. I can do that by not using ‘position: absolute’ when styling #login_container, however, then the login form gets cut-off because the containing #header div is not tall enough. In other words, I want the #login_container aligned with the right edge of #header, but laid on top of #content, if any.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could either set 

    #header {
 position: relative;
 height: 60px;
}
#login_container {
 position: absolute;
 right: 0;
 top: 60px; /* equal to #header height, if it's not fixed, you should retrieve it dynamically via jQuery */
}

    and then dynamically retrieve #content’s size and apply it to #login_container.

    Otherwise, and maybe even better, you could wrap the whole code in a #container div, set its width to whatever width you wish the site to have, set it centered, then move #login_container from inside #header to immediately after it and with absolute position. You will have a cleaner css code and less meddling to do with jQuery (just setting login_container’s height).. so it should be like this (if I’m not missing anything):

    <!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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}
#login_container { 
    position: absolute; 
    right: 0;
    width: 100%;
    z-index: 10;
}
#content {
    position: relative;
    z-index: 0;
}
</style>
<!--[if lte IE 6]><style type="text/css"></style><![endif]-->
</head>

<body>
<div id="container">
    <div id="header" class="row">
        <ul id="topnav">
            <li>
                <a href="#">a</a>
                <span><a href="#">aa</a> <a href="#">ab</a></span>            
            </li>
            <li>
                <a href="#">b</a>
                <span><a href="#">ba</a> <a href="#">bb</a></span>
            </li>
            <li style="float: right;"><a href="#">Login</a></li>
        </ul>

    </div>
    <div id="login_container">
        <form method="post" id="login_form">
            <p>login form</p>
        </form>

        <form method="post" id="create_account_form">
            <p>create account form</p>
        </form>
    </div>    

    <div id="content">
    content here
    </div>
</div>
</body>
</html>

    Give it a try and let me know if you still got problems!

    • 0