Search code examples
htmlbuttoninputalignment

How to connect a button to an input

How would I make the button connect to the input, there is an awkward gap I don't know how to fix.

here is the input and button

  #ask {

        padding: 10px  10px 10px 6px;
        font-size:45px;
        background-color:#FAFAFA;
        min-width: 400px;
        padding: 0 auto;
        border-radius: 5px;

  }

#button {
      text-align:center;

      }

 </style>


   <input id="ask" type="text" placeholder = "Ex: how tall is the gateway arch" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Ex: how tall is the gateway arch'"/>
   <input type="image" src="qmb.png" name="saveForm" class="btTxt submit" id="button" height="50.5px" padding = "0px"/>
Solution

  • Use CSS float:left to get input & image side by side. 

    input, img {
    float:left;
}

    Please check this fiddle: http://jsfiddle.net/hnj604pr/