Text box with search image using html5 and css3

I am making the first site using html5 and css3. To display a text box with an image in the search stack, I found this help and works well, like:

Here is the code:

HTML

<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />

CSS

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

I need to show the image to search on the right side of the text box. I tried to understand CSS, but I could not get it.

Can you please guide me what is grouping an image inside a text box. How are its display and positioning controlled since there was no display property in the CSS?

How can I change its display on the left side of the text box?

thank