Align checkbox and label - html

Question

I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>​
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
​As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing

Answer 1

One option is to amend the style of the label element that follows the checkbox:
​input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.

Answer 2

It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.

Answer 3

Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
​<input id="checkbox" type="checkbox"> My Label
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 4

Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.

Answer 5

All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.

Answer 6

Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.

Answer 7

I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>

Answer 8

Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.

Answer 9

The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>

Answer 10

I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>