How align div to a form field?

Question

Currently I have the following HTML code.

            <div class="field">
            <label>E-mail address: </label>
            <input type="text" id="email" name='email' style="width:200px;"></input>
            <span class='warning' id="emailWarning" > </span>
            <div class="tip" id="emailTip"></div>

        </div>

However, I want the text in the div element (class = 'tip') to be aligned with the start of the form's text field. How should I do this using HTML and CSS?

Here's what is looks like now: http://jsfiddle.net/pEJMD/embedded/result/

score 2 · Accepted Answer · answered Mar 06 '13 at 12:57

2

This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.

answered Mar 06 '13 at 12:57

alexbusu

701
4
13

Thanks.. I ended up using this. I thought this would be a better approach than hard coding a value in pixels to 'shift' the 'tip' div to the right.. (as suggested in the other answers) – mahela007 Mar 07 '13 at 18:06

Sunyatasattva · Answer 2 · 2013-03-06T13:08:55.240

Well, either you use a <table>, putting in one cell the <label> and in the other the <input>, or you use fixed widths/margins or paddings.

Solution 1: Table

Table solution

In this solution you use a table to hold the form. On column is for labels, the other column is for inputs. In this case you will have the tip in the input column, and it will align automatically with the input.

This has the pro to be working for flexible dimensions of your label/inputs. And tables are not always evil. Just remember that, if you want to keep your label aligned with the input, add a vertical-align:top to your CSS.

Solution 2: Fixed width

Fixed-width solution

In this solution you give a fixed width to your label, and move the .tip div using either margin, padding or left.

This will hold your layout in place, so be careful of extremely long labels!

Thanks.. that was a good answer. I prefer not to use tables because, according to w3schools, a tables are for displaying tabular data only. I'll stick with the other method. :) — mahela007, Mar 07 '13 at 17:46

score 1 · Answer 3 · answered Mar 06 '13 at 12:57

You can set a fixed size to the label. Than push the div to the right with the size of the label:

<div class="field">
   <label style="width:100px;">E-mail address: </label>
   <input type="text" id="email" name='email' style="width:200px;"></input>
   <span class='warning' id="emailWarning" > </span>
   <div class="tip" id="emailTip" style="margin-left:100px;">
      The quick brown fox jumps over the lazy dog
   </div>
</div>

And the result.

score 1 · Answer 4 · edited May 23 '17 at 12:11

You don't need an explicit width at all, nor tables; just use CSS tables (see my answer to this related question):

CSS

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

HTML

<form>
    <p>
        <label for="a">Short label:</label>
        <input id="a" type="text">
    </p>
    <p>
        <label for="b">Very very very long label:</label>
        <input id="b" type="text">
    </p>
</form>

Here's a JSFiddle: http://jsfiddle.net/DaS39/1/

And if you need the labels right-aligned, just add text-align: right to the labels: http://jsfiddle.net/DaS39/

score 0 · Answer 5 · answered Mar 06 '13 at 13:04

0

Use margin-left:

Change:

<div class="tip" id="emailTip">

To:

<div class="tip" id="emailTip" style="margin-left:95px;">

DEMO

Learn more about the CSS margin property here.

answered Mar 06 '13 at 13:04

chriz

1,580
19
27

score 0 · Answer 6 · answered Mar 06 '13 at 13:05

0

You can give a height to the label, give a width to the parent div and float your tip. See the demo: http://jsfiddle.net/pEJMD/4/

answered Mar 06 '13 at 13:05

otinanai

3,987
3
25
43

Heh - I thought of this one too, but it's such a dirty, dirty hack =) – Raad Mar 06 '13 at 13:07
1

I guess the end justifies the means... :) – otinanai Mar 06 '13 at 13:35

score 0 · Answer 7 · answered Mar 06 '13 at 13:07

0

Here you go: http://jsfiddle.net/4sJ2t/ You just need to give your label a fixed width, and then your tip a left margin

label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}

answered Mar 06 '13 at 13:07

James King

1,897
11
16

How align div to a form field?

7 Answers7

Solution 1: Table

Solution 2: Fixed width

CSS

HTML