CSS Forum

**empiresolutions** · 11-14-2007, 05:09 AM

In the following code i need *Signup* to align just to the right of *Login*. Due to *SearchContainer* location, it must be absolute positioned. Thanks for the help.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css" title="">
#SearchContainer    { position:absolute; z-index:1; width:210px; height:125px; border:1px solid red; }
    #SearchField    { position:relative; z-index:3; width:200px; top: 5px; border:1px solid orange; }
    #LoginMessage    { position:relative; z-index:3; width:200px; top: 10px; border:1px solid yellow; }
    #Login            { position:relative; z-index:3; width:150px; top: 20px; border:1px solid green; }
    #Signup            { position:relative; z-index:4; width: 25px; top: 20px; left: 10px; border:1px solid blue; }

</style>

</head>
<body>

    <div id="SearchContainer">
        <div id="SearchField">Epsum factorial non</div>
        <div id="LoginMessage">Lorem ipsum dolor</div>
        <div id="Login">Li Europan lingues<br>Li Europan lingues</div>
        <div id="Signup">xxx</div>
    </div>

</body>
</html>

**chrishirst** · 11-14-2007, 06:15 AM

float it

**angele803** · 11-14-2007, 01:27 PM

What Chris Said..
Here is how to do it:

Code:

<style type="text/css" title="">
#SearchContainer    { position:absolute; z-index:1; width:210px; height:125px; border:1px solid red; }
    #SearchField    { position:relative; z-index:3; width:200px; top: 5px; border:1px solid orange; }
    #LoginMessage    { position:relative; z-index:3; width:200px; top: 10px; border:1px solid yellow; }
    #Login            { position:relative; z-index:3; width:150px; top: 20px; border:1px solid green; float:left; }
    #Signup            { position:relative; z-index:4; width: 25px; top: 20px; left: 8px; border:1px solid blue; float:left; }
    .clear {clear:both;}

</style>

</head>
<body>

    <div id="SearchContainer">
        <div id="SearchField">Epsum factorial non</div>
        <div id="LoginMessage">Lorem ipsum dolor</div>
        <div id="Login">Login Area</div>
        <div id="Signup">xxx</div>
        <br class="clear" />
    </div>

</body>
</html>