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> Code (markup):
Hmm. I'm not getting, why you use 'position:relative' for the 'signup'-container. You may as well omit the position-attribute. The following would work: #Signup { float:right; z-index:4; width:25px; top:20px; margin-right:30px; border:1px solid blue; } Code (markup): Though it's not elegant style I admit...
Thanks bonzay, float:right; did the trick. I cant believe i missed that. I also moved *Signup* above *Login*. #Signup { float:right; margin:20px 5px 0 0; }