cesarcesar Posted November 14, 2007 Share Posted November 14, 2007 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. <!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> Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted November 14, 2007 Share Posted November 14, 2007 try this <!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: +150px; 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.