CODEWITHSUNDEEP
htmlcss
urker
urker

Reputation: 123

Aligning textbox and image in table cell

Is it possible to align textbox and image in same line so both of them occupy 100% of cell's width? (without setting specific width to the textbox like width:95%)

   <table style="margin: 0px;float:left" border="1"  width="50%" cellpadding="5" cellspacing="5">
      <thead>
        <tr>
           <td class="title" colspan="2">
              Options
           </td>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td class="header" style="width: 110px;">
              Date                        
           </td>
           <td>           
             <input name="txtRelease" type="text" id="txtRelease" style="float:left;display: block;width: 100%;height: 100%;" /><input type="image" name="ImageButton1" id="ImageButton1" style="float:left;" src="http://www.classiclodges.co.uk/images/icon_date_picker.jpg" style="border-width:0px;float:right" />                       
          </td>                                            
     </tbody>
 </table>

http://www.webdevout.net/test?01O&raw

Upvotes: 0

Views: 3603

Answers (3)

Šime Vidas
Šime Vidas

Reputation: 185893

I used a wrapper element and absolute positioning.

Live demo: http://jsfiddle.net/62sAU/6/

Alternative layout (added some padding): http://jsfiddle.net/62sAU/7/

Upvotes: 1

mr.b
mr.b

Reputation: 2708

You can have your image as background on the textbox instead. Try this on your textbox css.

background: url("http://www.classiclodges.co.uk/images/icon_date_picker.jpg") no-repeat scroll right center transparent;

Upvotes: 1

Eray
Eray

Reputation: 7128

Do you want like this ? http://www.jsfiddle.net/Tt5gu/

For this you have to expand width of and set width in pixel.

In summary, you couldn't set width values very well. You have to calculate widths :)

Upvotes: 0

Related Questions