ngreenwood6 Posted October 2, 2008 Share Posted October 2, 2008 I have a css file: body { margin:0 auto; width:800px; height:100%; border:1px solid #000000; } #input { } #get { } #time { float:right; } Then I have an html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <script type="text/javascript" src="get.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="input"> <form name="form1"> Keyword: <input type="text" name="keyword" onkeyup="showUser(this.value);"/> </form> </div> <div id="get"> </div> <div id="time"> <script type="text/javascript"> show(); </script> </div> </body> </html> On the left side of the page at the very top in the input id it shows keyword and then a text box. Then on the left it shows the time. The problem is that even though it shows the time on the left it is not where I want it. I want it to be on the same line as the keyword and text box but it is about 3 lines down. Any help is appreciated. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 You need to add "display: inline;" to your CSS. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 I tried adding display:inline; to the #time field but it made no difference. Then I attempted to add it to the body of the css file but then it took the border off but the text was inline. Any other suggestions? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 You need to add it to all elements that you want on the same line. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 So I added the display:inline; to the #input where the form is and #time where the time displays and it still made no difference. Can you provide me with the correct code possibly or check for errrors. Any help is appreciated! Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 #input { display: inline; } #get { display: inline; } #time { display: inline; } Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 That is what I had and it is making no difference at all. It just looks exactly the same as it did before. Is there any other way to accomplish this? Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 I dont know if this would make a difference or not but I am using ajax,php, and mysql on this page. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 Ajax, php, and mysql shouldn't have any effect on it. I recently created something like this. If you DON'T use display: inline; they will, by default, display one on top of another. So, not sure what's going on. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 Yeah it was confusing me as well. I have tried several things and nothing seems to fix this issue. Does anyone have any other suggestions? By the way thanks for your help f1fan. If someone might have some spare time and want to copy the pages and try to get them to display correctly it would be appreciated. Maybe I can help with something else Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 Ah hah! I think I figured it out. I just copied your code to one of my sites and tested it. It wasn't displaying properly at first. Then I added display: inline; to the form tag and it worked. This is my exact code (changed a little, because I don't have your js file): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <style type="text/css"> body { margin:0 auto; width:800px; height:100%; border:1px solid #000000; } #input { display: inline; } #get { display: inline; } #time { display: inline; } </style> </head> <body> <div id="input"> <form name="form1" style="display:inline;"> Keyword: <input type="text" name="keyword"/> </form> </div> <div id="get"> get </div> <div id="time"> time </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 That worked for the way that you showed it to me. However, when I use the float:right; command in the time div it throws that down to the next line. Any ideas why? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 The display attribute has always been finicky. I think you may need to try something else, such as text-align: right; or something to that effect. Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 Well the text-align:right; puts it on the same line but it is not all the way to the right of the page like the float. Any ideas on that. I appreciate all of your help at this point. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted October 2, 2008 Share Posted October 2, 2008 Try this for your CSS: body { position: relative; top: 0px; left: 0px; margin:0 auto; width:800px; height:100%; border:1px solid #000000; } #input { display: inline; } #get { display: inline; } #time { position: absolute; top: 0px; right: 0px; display: inline; } Quote Link to comment Share on other sites More sharing options...
ngreenwood6 Posted October 2, 2008 Author Share Posted October 2, 2008 Wow thanks that worked out really well. It is working exactly how I wanted it too. Thank you for all of your help. If you need anything please let me know. I say this is one of the best communities on the internet. 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.