html button is rendering below the input box - html

Question

I have a input box for users to enter search terms in. I have a input button beside the search box. for some reason the button is rendering below the search box.
I want the button to be right beside the input box.
My html:
<div id="searchbox">
<form method="post" action="/search/test">
<div class="searchinput">
<input type="text" id="searchbox" value="" /></div>
<div class="searchbutton">
<input type="submit" id="searchboxbutton" value="Go" /></div>
</form>
</div>
CSS:
#header #searchbox
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
#header #searchbox #searchinput
{
display:inline;
float:left;
}
#header #searchbox #searchbox
{
display:inline;
float:left;
}
#header #searchbox #searchbutton
{
display:inline;
float:left;
}

Answer 1

Simplify, simplify, simplify.
HTML
<form method="post" action="/search/test">
<input type="text" id="searchbox" value="" />
<input type="submit" id="searchboxbutton" value="Go" />
</form>
CSS
input {display: inline}

Answer 2

Your <input type="text" id="searchbox" value="" /> is matching this style (width: 400px) as well:
#header #searchbox
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
IDs must be unique - change it or the containing element and write your styles accordingly.
http://validator.w3.org/docs/errors.html
141: ID X already defined
An "id" is a unique identifier. Each time this attribute is used in a
document it must have a different
value. If you are using this attribute
as a hook for style sheets it may be
more appropriate to use classes (which
group elements) than id (which are
used to identify exactly one element).

Answer 3

Just add this CSS to your CSS style sheet:
.searchinput{
display:inline-block
}
It will add your content in one row.

Answer 4

You have an id based selector in CSS (#searchinput) but you are using classes in markup (<div class="searchinput">). Change either of the ones and it should work.
Third, you don't need the display:inline. Just float: left will do. Also, floated elements are required to have a width. So set a width.

Answer 5

Probably because your #searchbox width is 400px and your input tag and button tag is more than 400 px.
Try making the #searchbox width to 600px and see what happens.
Change your css from
#header #searchbox
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
#header #searchbox #searchinput
{
display:inline;
float:left;
}
#header #searchbox #searchbox
{
display:inline;
float:left;
}
#header #searchbox #searchbutton
{
display:inline;
float:left;
}
to
#header
{
float:left;
width:400px;
padding:5px 0px 0px 0px;
}
#searchinput, #searchbox, #searchbutton, #searchboxbutton
{
display:inline;
float:left;
}