Aligning form with multilined label? (HTML/CSS) - html

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;
}

Answer 1

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>

Answer 2

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;
}

Answer 3

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>