How to layout a form like this with CSS and maybe some JS?


Tags: html,css

Problem :

I have a design that has form labels inline to the left of text fields. The labels are all different widths. I need to have the right edge of the text field right aligned.

Currently the fields look like this. See how the right edge is not aligned?

Name: _____________

Address: _____________

City: _____________

I need it to look something like this...

Name: _______________

Address: _____________

City: _________________

Can I do this without having to set a fixed width on each text field?



Solution :

Granted it's probably not the most efficient approach, but you could make a separate table for each field.

HTML

<table>
    <tr>
        <th>Name:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>Address:</th>
        <td><input type="text"></td>
    </tr>
</table>

<table>
    <tr>
        <th>City:</th>
        <td><input type="text"></td>
    </tr>
</table>

CSS

table { width: 300px; }
td { border-bottom: 1px solid black; }
th { width: 1em; }

input { width: 100%; border: none; }
input:focus { outline: none; }

​ ​ JS Fiddle: http://jsfiddle.net/BUy6f/2/


    CSS Howto..

    How can I add a pulse animation to a div in an array of divs, in Javascript?

    How to fit these divs inside a div to occupy whole horizontal width

    How do you get the height of a form div + error messages after hitting the submit button in javascript?

    advice about how to vertically center content in fluid element

    How to make an inline-block box stick to the top? [duplicate]

    How can I change the color of this text?

    How can i setup my php code to change my CSS background picture daily [closed]

    How can I make images fit into a 200 pixel square box using CSS?

    How to add a color in the
    bottom content area?

    Javascript: how to append more text to user copied text ala nydailynews.com

    How to combine several hover elements in JS/Jquery

    how to make my HTML 'font' edge color match with background on css?

    How to change CSS to the same class but another input name

    How to debug the different behavior of the same browser on the different platforms?

    How float divs inside a td

    How to generate width CSS from JavaScript / C#

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to flip which side a progress bar begins at with CSS

    How can I allign select menu with a button on the same line with css bootstrap?

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to color path elements in SVG?

    How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

    how do i change a div background when you hover over a button in another div?

    How do I make a textarea resize properly when I resize browser window?

    How to Display a div on mouse-over using jquery ?

    How to place a
    to the right of an input field

    How to vertically center text overlapping an image?

    Centered CSS pages that are longer than one screen appear 5px~ further to the left than shorter ones - how do I stop this?

    How can I center just one element within a container?

    How to make responsive horizontal grids? [closed]