ansaurus

Question

drawing a div on top of the rest without using absolute positioning

Answer 1

+1 A:

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 reterive it dinamically via jQuery */
}

and then dinamically retrive #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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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!

Lucius 2010-10-11 20:10:32

oh, just one more note: if you float to the right your Login button/link, you should put it before the other form elements in your code, in order for it to be aligned with the other form elements, and not on the line below.

Lucius 2010-10-11 20:18:02

yes, that did it. Many thanks. The trick was to have the containing container with position relative, and then have stuff inside it with position absolute.

punkish 2010-10-12 02:08:44

ansaurus

tags:

views:

answers:

drawing a div on top of the rest without using absolute positioning

related questions