CSS Issues with image and input field
===

I am having difficulties manipulating an input field, image and text all in the same line. I have set float to the image and text but it doesnt solve the issue. How can I make the image, text and input be all in one line for all browsers? [EXAMPLE][1]



![enter image description here][2]


**CSS**

    h1 {
    	letter-spacing: 2px;
    	font-style: italic;
    	padding: 5px;
    	color: #898989;
    	font-size: 140%;
    	font-weight: lighter;
    	margin: 0px;
    
    }
    
    
    
    h2 {
    	color: #333333;
    	font-weight: bold;
    	font-size: 105%;
    	margin: 0px;
    
    }
    
    input, select {
        border: 1px solid #C3C3C3;
        background: #ffffff;
        padding: 3px 4px;
        color: #222;
        margin: 0px 5px 0px 0px;
    	border-radius: 7px 7px 7px 7px;
    	font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
    }
    
    input:focus, select:focus {
        outline: none;
    }
    
    .InputGroup {
        display: inline-block;
        padding: 3px 4px;
        border: 1px solid #FFF;
        border-radius: 7px 7px 7px 7px;
    }
    
    input.medium, select.medium{
    	width:55%;
    }
    
    .youTubePng {
    
    float:left; padding-right: 5px;
    
    
    }
    
    .youTubeLink {
    padding-right:5px; float:left; padding-top: 3px;
    
    }

**HTML**

    <html>
    <form autocomplete="off" enctype="multipart/form-data" method="post"  name="form">
                        <h1 style="padding-left:0;">Video(Optional)</h1>
                         <img src="images/YouTube.png" class="youTubePng" />
                         <h2 id="youTubeLink">Link:</h2>
                        
                        <input id="ytinput" name="ytinput" type="text" class="field text medium" value="<? $url ?>" maxlength="255" tabindex="1" 	/>
    </html>		

		   </form>


  [1]: http://webprolearner2346.zxq.net/TabsNextPrev/index.php
  [2]: http://i.stack.imgur.com/r4eNJ.png