html button is rendering below the input box

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

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;
}

Answer 2

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 3

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 4

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}