label positioning in forms (using div) - css

Question

Newbie Coder here. I'm trying to build a simple form (first, last, email, country), and I have labels corresponding to each. Positioning wise, I want to have the labels ABOVE each input. However, what I'm having some issues with is putting the first and last inputs next to each other (positioned horizontally) while keeping the labels above.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
and the CSS
.firstlast div {
float: left;
clear: none;
display:inline;
}
I can use a linebreak to position the first over the input, but the linebreak still applies to the second label and form.
Any ideas on this?
Thanks!

Answer 1

Try This:
<form name="" method="post">
<div style="float:left;margin-right:20px;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<div style="float:left;">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</form>
And CSS:
input, label {
display:block;
}

Answer 2

You'll need to nest them in their own containers and float them. Or just do the one.
<div id="firstlast" class="grid_8">
<div style="float:left;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>

Answer 3

You define .firstlast Class in css . But you used ID in your html code why
-----------------------------------------------------
Now you can try this
Define your label display block in css as like this
label{
display:block;
magin-top:20px;
}
Demo
============================
Try Second Method is this
HTML Code
<div id="firstlast">
<div class="grid_8">
<div class="control-group">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
</div>
<div class="grid_8">
<div class="control-group">
<label for="first">email</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">country</label>
<input type="text" name="last" id="last">
</div>
</div>
</div>
Css
.grid_8{overflow:hidden;margin-top:20px;}
.control-group{
float:left;
width:50%;
}
.control-group label{
display:block;
}
Demo

Answer 4

If i understand your question, you want first label and input field in horizontal and for rest you want label text just above the input field.
Here is the css code should like..
input[type="text"]{
padding:10px;
}
label{vertical-align:top;
padding:10px 0;
display:block;
}
#firstlast {
width:250px;
}
label:first-child, input:first-child{ display:inline; padding:0 5px 0 0;}
HTML should like this.
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
<label for="email">e-mail</label>
<input type="text" name="email" id="email">
</div>
And here is the working Demo.
http://jsbin.com/nugucelu/1/edit