Aligning form with multilined label? (HTML/CSS)

Question

I am wanting to make a label on a form that is much longer than the other labels in the form appear on multiple lines. I then want to align the inputs to the labels on the colons of the labels. Here is a picture of the current set up:

Basically, I need Releasse Date to appear as

Release Date

(YYYY-MM-DD): [input box]

HTML Code:

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date (YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

CSS Code:

#songform {
margin: 20px;
}

label {
float: left;
width: 250px;
margin-top: 20px;
clear: right;
}

input{
margin-top: 20px;
}


#songsubmit {
margin-left: 80px;
}

why not just take the "Release Date" out of the div and have it in a label before the current div it is in then the date and input box will line-up together directly below as intended? seems logical — smoggers, Jul 30 '15 at 21:54

score 2 · Accepted Answer · answered Jul 30 '15 at 23:30

Use display:inline-block and vertical-align:bottom. No floats or absolute positioning needed.

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}




label {
    display:inline-block;
    width: 250px;
    vertical-align:bottom;
}

#songsubmit {
    margin-left: 80px;
}

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

score 0 · Answer 2 · answered Jul 30 '15 at 21:57

0

I've made a fiddle with code for your case: http://jsfiddle.net/862xc2j1/ You can solve it with adding clear:left to each div wrapper for each form field block.

  <div class="form-item">
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>



.form-item {
        clear: left;
}

answered Jul 30 '15 at 21:57

shershen

9,875
11
39
60

OP specified that he wants the input element to line up with the colon (i.e. the last line) of the label, but at least in Chrome, your JSFiddle shows the input element lined up with the first line. – Maximillian Laumeister Jul 30 '15 at 22:00

Maximillian Laumeister · Answer 3 · 2015-07-30T23:35:16.963

To get this alignment next to the colon, you can use absolute positioning. Here is a working example - I made a few more changes to get it to work:

#songform {
    margin: 20px;
}

#songform > div {
    position: relative;
    margin-top: 20px;
}

#songform > div:after {
  /* Clearfix */
  content:"";
  display:table;
  clear:both;
}

#songform > div > input {
    position: absolute;
    bottom: 0;
}

label {
    float: left;
    width: 250px;
    clear: right;
}

#songsubmit {
    margin-left: 80px;
}

<form action="http://localhost/songadded.php" method="post" id="songform">

    <h4>Add a New Song</h4>

    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" size="30" value=""/>
    </div>

    <div>
        <label for="artist">Artist:</label>
        <input type="text" name="artist" size="30" value=""/>
    </div>

    <div>
        <label for="album">Album:</label>
        <input type="text" name="album" size="30" value=""/>
    </div>

    <div>
        <label for="genre">Genre:</label>
        <input type="text" name="genre" size="30" value=""/>
    </div>

    <div>
        <label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
        <input type="text" name="release_date" size="30" value="" id="rdinput"/>
    </div>

    <div>
        <label for="bpm">BPM:</label>
        <input type="text" name="bpm" maxlength="3" value=""/>
    </div>

    <div id="songsubmit">
    <input type="submit" name="submit" value="Add Song"/>
    </div>
</form>

You should avoid using extra HTML elements just to clear floats. You should use a more modern solution: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — Jon P, Jul 30 '15 at 23:33

Aligning form with multilined label? (HTML/CSS)

3 Answers3