html: how to make an image and search box on one line?

[kalo]

Hello everyone!I had a simple html question...but I have yet to find the answer...On my website, http://msflights.net/ I put a Google search box on the homepage (third box down on the homepage). It works nicely, however I want the Google image and the search box all on the same line. As of now the Google image is above the search box. I have tried many things such as divs and tables...but have been unsuccessful so far.Here is the code I am using: [pastebin link: http://pastebin.com/uUmUmQbF ]<img src="http://msflights.net/images/google.png"><form method="get" action="http://www.google.com/search" target="_blank"><input style="width:800px"type="text"name="q"size="31"max length="255"value=""/><input type="submit"value="Google Search"/></form>May anyone suggest how I might edit this so that the Google image and search bar appear all on one line? Thank you very much!

[jeffman]

A form is a block-level element. By default it will always float below the previous element. Try putting the image inside the form. You'll have new alignment issues when you do that, but at least they can be solved.

[kalo]

thanks! Not sure why I didn't think of that (as you can see I'm pretty new) Here is my result: http://msflights.net/ It looks decent, but the search bar appears a bit high (I think it might be an optical illusion because of the shaded background section, when examined closely I think it's centered) Anyways here is the code I used for aligning: [pastebin: http://pastebin.com/kHAbYNnP ] Could I have done this alignment in a better way?Thanks!

Edited January 27, 2013 by kalo

[DarkxPunk]

Width is too wide for the search area. Fix that and tell both the image and search field to float left. Problem solved.