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> Link to comment https://forums.phpfreaks.com/topic/77278-relative-positioning/ 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> Link to comment https://forums.phpfreaks.com/topic/77278-relative-positioning/#findComment-391309 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.