form throwing elements out of whack

[wellgahlee]

I am trying to add a search form to the right of an image inside a div, and no matter how I try to style the form, it keeps pushing the elements below it out of whack.

Basically, I have a container div

#container {

padding: 0px 0px 0px 0px;
margin-top: 7px;
position: absolute;
right: auto;
left: auto;
width: 1008px;
height: 564px;
background-color: #FFF;
border-style: solid;
border-color: #000000;
border-width: 1px;
}

That contains another div which contains the masthead image of my page.

#masthead {
background-color: #FFFFFF;
width: 1008px;
height: 37px;
float: left;
}

Underneath the masthead div is another div which contains a menu

#navcontainer {
background-color: #FFFFFF;
position: relative;
height: 20px;
}

Within the masthead div, and to the right of the masthead image, I'd like to have a search form.

Any ideas on how to style the form so that it fits and does not throw the menu below it off?

thanks

[AWildman]

Are there any styles on form or input? Try adding form{display: inline;}. I've noticed that forms have their own default padding and margins that make subsequent elements not look as expected.

[wellgahlee]

thank you for this suggestion! It seems to have done the trick!