Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

?
Lv 5

HTML - Align the start of form input box with text before the box?

I have a webpage that looks like this: http://puu.sh/5zHcT/1b8d9c9aff.png

As you can see, the start of the text box section is lined up, but some of the boxes have text in front.

I'd like to have the start of each text box lined up instead. I put together a quick photoshopped image of what I'd like it to look like, hopefully this helps you understand it: http://puu.sh/5zHAh/da3aa1bae4.png

Is it possible to do this? Preferably using just CSS and/or HTML, but Javascript if necessary.

Update:

I should note, I avoid using tables when I can since the code looks messy to me.

3 Answers

Relevance
  • 8 years ago
    Favorite Answer

    Use Table Interface

    Like

    <tr>

    <td>Text</td>

    <td><Input Box></td>

    </tr>

    OR

    Use Div and CSS

    Legand Tag need to set with CSS Left

    Input Tag Need to be set with Css right

  • 8 years ago

    Easiest approach is to use table. Copy next lines inside your <body> tag, set some <table>, <tr>, <td> attributes to suit your needs:

    <table>

    <tr>

    <td>Item name:</td>

    <td></td>

    <td><input type="text" /></td>

    </tr>

    <tr>

    <td>Image path:</td>

    <td align="right">/images/item/</td>

    <td><input type="text" /></td>

    </tr>

    <tr>

    <td>Price:</td>

    <td align="right">AUD $</td>

    <td><input type="text" /></td>

    </tr>

    </table>

  • Anonymous
    8 years ago

    basically you want to float the right column to the right (normally its left), put it in a table and float the righter columns to the right (dont forget to give it a width)

Still have questions? Get your answers by asking now.