radio button not aligned properly in table cell - html

I want to have four images for selection in radio button, however, when generating the radio button, the first image in td always have bigger width than others image, and the radio button is beside the image but not on top of the image, how can I make the first image have same width like others image in td.
Here are my codes:
<td><input type="radio" name="emotion" id="SeVYzlSRmE.jpg"/>
<label for="SeVYzlSRmE.jpg"><img src="SeVYzlSRmE.jpg" alt="I'm sad" /></label>
</td>
<td><input type="radio" name="emotion" id="zSepCGRnUc.jpg"/>
<label for="zSepCGRnUc.jpg"><img src="zSepCGRnUc.jpg" alt="I'm sad" /></label>
</td>
<td><input type="radio" name="emotion" id="WkzJIGctSz.jpg"/>
<label for="WkzJIGctSz.jpg"><img src="WkzJIGctSz.jpg" alt="I'm sad" /></label>
</td>
<td><input type="radio" name="emotion" id="vsIClceVUI.jpg"/>
<label for="vsIClceVUI.jpg"><img src="vsIClceVUI.jpg" alt="I'm sad" /></label>
</td>
</tr>
And here is the outlook image:
And here is the css I used:
.multiline
{
padding:0px;
white-space: pre-wrap;
height: 100px;
width: 50%;
margein:0px
}
.left-div {
float: left;
width: 50%;
height: 100px;
margin-right: 8px;
background-color: linen;
white-space: pre-wrap;
}
.right-div {
margin-left: 108px;
}
.row {
display: flex; /* equal height of the children */
}
.hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
.spacer {height:4px; }
.beta {border-collapse:collapse; table-layout:fixed; width:1000px;}
table td {word-wrap:break-word;}
.alpha {width:300px;height:300px;}


Try below code :
<style>
.box {
width: 50px;
float:right;}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<tr>
<td><input type="radio" name="emotion" id="SeVYzlSRmE.jpg"/>
<label for="SeVYzlSRmE.jpg"><img class="box" src="SeVYzlSRmE.jpg" alt="I'm sad" /></label>
</td>
<td><input type="radio" name="emotion" id="zSepCGRnUc.jpg"/>
<label for="zSepCGRnUc.jpg"><img class="box" src="zSepCGRnUc.jpg" alt="I'm sad" /></label>
</td>
<td><input type="radio" name="emotion" id="WkzJIGctSz.jpg"/>
<label for="WkzJIGctSz.jpg"><img class="box" src="WkzJIGctSz.jpg" alt="I'm sad" /></label>
</td>
<td><input type="radio" name="emotion" id="vsIClceVUI.jpg"/>
<label for="vsIClceVUI.jpg"><img class="box" src="vsIClceVUI.jpg" alt="I'm sad" /></label>
</td>
</tr>
</table>
</body>
</html>


Try this:
.some_class td{
position:relative;
}
.some_class td input{
position:absolute;
top:34%;
left:0;
}
.some_class td label img{
display:inline-block;
padding-left:20px;
}
<table class="some_class">
<tr>
<td>
<input type="radio" name="emotion" id="SeVYzlSRmE.jpg"/>
<label for="SeVYzlSRmE.jpg">
<img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&g=1" width="64" height="64" alt="Feel Happy" />
</label>
</td>
<td>
<input type="radio" name="emotion" id="zSepCGRnUc.jpg"/>
<label for="zSepCGRnUc.jpg"><img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&g=1" width="64" height="64" alt="Feel Happy" /></label>
</td>
<td>
<input type="radio" name="emotion" id="WkzJIGctSz.jpg"/>
<label for="WkzJIGctSz.jpg"><img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&g=1" width="64" height="64" alt="Feel Happy" /></label>
</td>
<td>
<input type="radio" name="emotion" id="vsIClceVUI.jpg"/>
<label for="vsIClceVUI.jpg"><img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&g=1" width="64" height="64" alt="Feel Happy" /></label>
</td>
</tr>
</table>


Have you tried setting a float on each element?
In the CSS, define a class and add something like:
.box {
width: 50px;
float:left;}

Related

How to align input element in HTML?

How can I do that?
My HTML code is
<p> <input type="text" name="Usuari" size="20" maxlength="60"/>
<p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p>
<p><input type="submit" name="submit" value="ACCÉS" /></p>-->
and my CSS code is
input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border:1px dotted #004080;
}

I would place "USUARI:" and "CLAU:" into div with class and give them fixed size.
<div>
<div>
<div class="hints">
USUARI:
</div>
</div><input type="text" name="Usuari" size="20" maxlength="60"/>
</div>
<div>
<div class="hints">CLAU:
</div>
<input type="text" name="Clau" size="20" maxlength="20" />
</div>
</div>
<input type="submit" name="submit" value="ACCÉS" />
<style>
input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border:1px dotted #004080;
}
.hints
{
width: 80px;
float: left;
}
</style>
https://jsfiddle.net/gm5wtw1e/

There are several ways to do that.
You can either use flex or with just a plain table:
<table>
<tr>
<td>Name:</td>
<td><input name="name"></td>
</tr>
<tr>
<td>Sur Name:</td>
<td><input name="surname"></td>
</tr>
</table>
---
<table>
<tr>
<td style="text-align: right;">Name:</td>
<td><input name="name"></td>
</tr>
<tr>
<td>Sur Name:</td>
<td><input name="surname"></td>
</tr>
</table>

p{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
<div class="row"><p> <input type="text" name="Usuari" size="20" maxlength="60"/></div>
<div class="row"><p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p></div>
<p><input type="submit" name="submit" value="ACCÉS" /></p>

label
{
display: block;
}
label span
{
display: inline-block;
text-align: left;
width: 100px;
}
<label>
<span>USARI:</span>
<input type="text" />
</label>
<label>
<span>CLAU:</span>
<input type="text" />
</label>
<label>
<span></span>
<input type="password" />
</label>
there are few error in your HTML code, you close the tag label but you never open it.
You should also wrap your fields in tag and wrap your label in tag .
You don't need to open the tag all the time, you can open it and close it at the beginning and at the end of the form.
There is also a --> at the end of the code, I assume that's another mistake.
Here is my solution to your question:
HTML
<label>
<span>USARI:</span>
<input type="text" />
</label>
<label>
<span>CLAU:</span>
<input type="text" />
</label>
<label>
<span></span>
<input type="password" />
</label>
And here is my css code:
CSS
label
{
display: block;
}
label span
{
display: inline-block;
text-align: left;
width: 100px;
}
You can now play with the CSS code in order to find the design that you like the most.

Table Layout to CSS Layout how to work around colspan?

If I create a layout with tables like the old-school way:
input {
width: 100%;
padding: 5px;
}
table {
border-collapse: collapse;
padding: 0;
margin: 0;
width: 50%;
}
td {
padding: 5px;
}
<table>
<tr>
<td colspan="3"><label>Label 1:</label></td>
</tr>
<tr>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td><label>Label 2:</label></td>
<td> </td><td>
<label>Label 3:</label></td>
</tr>
<tr>
<td><input type="text" /></td>
<td> </td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="3"><label>Label 4:</label></td>
</tr>
<tr>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td colspan="3"><label>Label 5:</label></td>
</tr>
<tr>
<td colspan="3"><input type="text" /></td>
</tr>
</table>
https://jsfiddle.net/njb69anL/
I get a layout where it is like a grid on the screen. It resizes to the width of the browser easily. Everything is spaced and placed correctly.
However, my html markup is full of table tags. If I wanted to rid myself of the table I'd start by making the markup semantic:
<div id="grp">
<label>Label 1:</label><input type="text" />
<label>Label 2:</label><input type="text" />
<label>Label 3:</label><input type="text" />
<label>Label 4:</label><input type="text" />
<label>Label 5:</label><input type="text" />
</div>
But is it even possible to achieve the same table-like layout with this little markup? It seems display: table cannot do colspan, and the trickiest part is having a row with two label,input pairs on the same row. Is it possible to achieve this without adding a whole bunch of wrapper divs and thus making the original markup messy (non-semantic) anyways?

* {
box-sizing: border-box;
}
.labels-wrapper {
display: flex;
flex-wrap: wrap;
width: 40%;
}
label {
flex-basis: 100%;
padding: 10px;
}
label:nth-child(2),
label:nth-child(3) {
flex-basis: 50%;
}
input {
margin-top: 5px;
display: block;
width: 100%;
}
<div class="labels-wrapper">
<label>Label 1:
<input type="text" />
</label>
<label>Label 2:
<input type="text" />
</label>
<label>Label 3:
<input type="text" />
</label>
<label>Label 4:
<input type="text" />
</label>
<label>Label 5:
<input type="text" />
</label>
</div>
Adding flexbox example for an alternative. Please use the "full page" button to really get a feel for how it looks.

The only way to get it looking right using the html above is with position:absolute which to me feels like a hack. I have wrapped label 2 and label 3 in a div so they may be grouped together.
The below html / css gets very close to the fiddle:
#grp {
width: 50%;
white-space:nowrap;
}
#grp label,
#grp input {
width:100%;
display:block;
clear:left;
}
#grp input {
margin-bottom:1em;
}
#grp div {
float:left;
width:49%;
}
#grp div + div {
margin-left:2%;
}
<div id="grp">
<label>Label 1:</label><input type="text" />
<div><label>Label 2:</label><input type="text" /></div>
<div><label>Label 3:</label><input type="text" /></div>
<label>Label 4:</label><input type="text" />
<label>Label 5:</label><input type="text" />
</div>

This is definitely possible. I have created a fiddle for you. It's about the same amount of content, but it is definitely more easy to manipulate than a table.
I just use:
<wrapper>
<row>
<label></label>
<input>
</row>
</wrapper>
https://jsfiddle.net/Kiaaanabal/qv89yb56/

You would use css float or inline-block and width percentage to specify the amount of space each row element consumes.
EDITED CSS Version
Example: https://jsfiddle.net/njb69anL/3/
In order for this example to work, the label and input positions would need to be next to each other for them to appear on the same row. The end result is your markup looks like the display. Using nth-child allows you to specify which element in the list to apply your rule to.
HTML
<div id="grp">
<label>Label 1:</label>
<input type="text" />
<label>Label 2:</label><label>Label 3:</label>
<input type="text" /><input type="text" />
<label>Label 4:</label>
<input type="text" />
<label>Label 5:</label>
<input type="text" />
</div>
CSS
*{
box-sizing: border-box;
}
#grp {
width: 50%;
}
input,
label {
display: block;
float: left;
width: 100%;
padding: 5px;
}
label:nth-child(3),
label:nth-child(4){
width: 50%;
}
input:nth-child(5) {
width: 49%;
}
input:nth-child(6) {
width: 49%;
margin-left: 2%;
}
For example: https://jsfiddle.net/njb69anL/2/
updated with a responsive layout
HTML
<form>
<div class="full-row">
<label>
<span>Label 1:</span>
<input type="text" />
</label>
</div>
<div class="half-row">
<label>
<span>Label 2:</span>
<input type="text" />
</label>
</div>
<div class="half-row">
<label>
<span>Label 3:</span>
<input type="text" />
</label>
</div>
<div class="full-row">
<label>
<span>Label 4:</span>
<input type="text" />
</label>
</div>
</form>
CSS
* {
box-sizing: border-box;
}
form input{
width: 100%;
padding: 5px;
}
form {
width: 80%;
overflow: hidden;
}
form > div {
float: left;
padding: 5px;
}
.full-row {
width: 100%;
}
.half-row {
width: 50%;
}
label > span{
display: block;
}

How to make CSS border show on radio button click

I want to have a border show up around the image next to the radio button, when that radio button is clicked. Currently, my CSS selector knowledge is lacking and I do not get the expected result.
My expectation is that when I click a radio button , the corresponding image should be highlighted, but it is not...
What is wrong?
label>img ~ .input:checked {
border: 2px solid #f00;
}
<table>
<tr>
<td><label>
<img src="http://bighappyface.com/Happy%20Face%2050x50.png"><br />
<input type="radio" name="page" value="original" />Original </label>
</td>
<td><label>
<img src="http://bighappyface.com/Happy%20Face%2050x50.png"><br />
<input type="radio" name="page" value="standard" checked="checked">Standard
</label></td>
</tr>
</table>
EDIT
Answers so far rearrange HTML elements, which is not desirable from design point of view. I prefer to keep the text at the bottom of the image, not above. I'll re-accept if there is an answer that keeps html elements in order ...

here is a solution who sweets your needs :
Live Demo
input:checked ~ img {
border: 2px solid #f00;
}
label, img {
position: relative;
top: -80px;
}
label, input[type=radio] {
top: 60px;
}
HTML :
<table>
<tr>
<td>
<label>
<input type="radio" name="page" value="original" /> Original<br />
<img src="http://bighappyface.com/Happy%20Face%2050x50.png">
</label>
</td>
<td>
<label>
<input type="radio" name="page" value="standard" checked="checked"> Standard<br />
<img src="http://bighappyface.com/Happy%20Face%2050x50.png">
</label>
</td>
</tr>
</table>

You need to use input instead of .input because the dot addresses a class and you have not specified a class. Additionally, the :checked pseudo-class needs to be written before the element you want to change. The sibling selector ~ should work in theory but I had to re-arrange the html elements. Tested using Chrome, Opera and Firefox.
input:checked ~ img {
border: 2px solid #f00;
}
<table>
<tr>
<td>
<label>
<input type="radio" name="page" value="original" /> Original<br />
<img src="http://bighappyface.com/Happy%20Face%2050x50.png">
</label>
</td>
<td>
<label>
<input type="radio" name="page" value="standard" checked="checked"> Standard<br />
<img src="http://bighappyface.com/Happy%20Face%2050x50.png">
</label>
</td>
</tr>
</table>

fiddle link
http://jsfiddle.net/abasnet/0535aymy/
input[type="radio"]:checked + img {
border: 2px solid #f00;
}
<table>
<tr>
<td>
<input type="radio" name="page" value="original" />Original
<img src="http://idzyanamohddahlan.files.wordpress.com/2011/02/2472566_f520.jpg">
</td>
<td>
<input type="radio" name="page" value="standard" checked="checked">Standard
<img src="http://idzyanamohddahlan.files.wordpress.com/2011/02/2472566_f520.jpg">
</td>
</tr>

Horizontal checkbox layout with label underneath

I just started coding a small page for myself after not doing any web design for a couple of years. As I now learned, laying out the page with tables is not state-of-the-art anymore (not sure if it ever really was).
Now I am trying to layout my page with CSS but couldn't find anything on:
How to align 7 checkboxes horizontally and put the corresponding label centered below the checkboxes?
How to align 2 selects horizontally and put the corresponding label centered above the selects?
The initial pure table-code was the following:
.form fieldset {
display: table;
border: 1px solid #c6c7cc;
border-radius: 5px;
}
.form label {
display: table-cell;
text-align: right;
padding: 5px;
}
.form input,
.form select {
display: table-cell;
}
.form .cssRow {
display: table-row;
}
.form .submit {
display: table-cell;
caption-side: bottom;
display: table-caption;
text-align: center;
}
<table>
<tr>
<td align="right">Name</td>
<td align="left">
<input name="name" type="text">
</td>
</tr>
<tr>
<td align="right">Day(s) of week</td>
<td align="center">
<table>
<tr>
<td align="center">
<input type="checkbox" name="day[]" value="mo" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="tu" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="we" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="th" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="fr" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="sa" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="su" checked>
</td>
</tr>
<tr>
<td align="center">Mo</td>
<td align="center">Tu</td>
<td align="center">We</td>
<td align="center">Th</td>
<td align="center">Fr</td>
<td align="center">Sa</td>
<td align="center">Su</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right">Validity</td>
<td align="center">
<table>
<tr>
<td>Valid from</td>
<td>Valid to</td>
</tr>
<tr>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="submit" value="Refresh">
</td>
</tr>
</table>
My CSS attempt so far looks like this:
<div class="form">
<fieldset>
<legend>Search</legend>
<div class="cssRow">
<label for="name">Name</label>
<input name="name" type="text" size="30" maxlength="30">
</div>
<div class="cssRow">
<label for="day[]">Day(s) of week</label>
<input name="day[]" type="text" value="ToDo" size="30" disabled>
</div>
<div class="cssRow">
<label>Validity</label>
<input type="text" value="ToDo" size="30" disabled>
</div>
<div class="submit">
<input type="submit" name="submit" value="Suchen">
</div>
</fieldset>
</div>
To illustrate my problem, I created the following JSFiddle: http://jsfiddle.net/c9a7ezyk/
Any suggestions are welcome, although I prefer a simple solution, as I am just (re)learning HTML and CSS.

I prefer a slightly different approach to the other answer, where the <input> element is nested inside of a <label>, this implicitly associates the label with the input to give all kinds of nice bonuses.
It also makes for a simpler to follow markup, with less nested containers.
Example
<label>
<input type="checkbox">
<span class="label">Sunday</span>
</label>
And then
label {
display: inline-block;
text-align: center;
}
span.label {
display: block;
}
Notice how clicking the labels check the associated checkbox properly. Selects behave exactly the same way. Because <input> and <select> are inlines by default, it means that they'll be affected by text-align: center.

Checkbox with label:
<div class="checkbox-label">
<label for="checkbox">Sunday</label>
<div class="checkbox-container">
<input name="checkbox" type="checkbox">
</div>
</div>
.checkbox-label {
display: inline-block
}
.checkbox-container {
text-align: center;
}
Notice that the checkbox is inline so you can put it in a container and use text-align: center
Also notice that I use display: inline-block on .checkbox-label so that they can be aligned horizontally (block elements, default for div, takes up a whole line and drops the following element beneath it)
I use the same principals for the selects
You can see the whole thing here:
http://codepen.io/Vall3y/pen/QwdWOe

Semantic Purity
I am a bit of an HTML purist, so here is an HTML form without any extra markup:
The legends are floated to the left and vertically centered using a line-height that matches the legends height
The inputs are wrapped in a label with display: inline-block which is given a width to force the text below / above the input
The fieldset:before properties allow us to vertically center the labels with vertical-align: middle
Full Example
The background colours are just to illustrate the layout.
* {
margin: 0;
padding: 0;
}
fieldset {
border: none;
height: 70px;
}
fieldset:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
background: #F90;
width: 0;
}
legend {
height: 100%;
line-height: 70px;
width: 150px;
text-align: center;
background: #F90;
float: left;
}
input[type=checkbox] {
margin: 0 5px;
}
.days label {
background: #F90;
width: 30px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.validity label {
background: #F90;
width: 100px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
<form>
<fieldset class="days">
<legend>Day(s) of Week</legend>
<label for="monday">
<input type="checkbox" id="monday" />Mo
</label>
<label for="tuesday">
<input type="checkbox" id="tuesday" />Tu
</label>
<label for="wednesday">
<input type="checkbox" id="wednesday" />We
</label>
<label for="thursday">
<input type="checkbox" id="thursday" />Th
</label>
<label for="friday">
<input type="checkbox" id="friday" />Fr
</label>
<label for="saturday">
<input type="checkbox" id="saturday" />Sa
</label>
<label for="sunday">
<input type="checkbox" id="sunday" />Su
</label>
</fieldset>
<fieldset class="validity">
<legend>Validity</legend>
<label for="from">Valid From
<select id="from">
<option>Option</option>
</select>
</label>
<label for="to">Valid to
<select id="to">
<option>Option</option>
</select>
</label>
</fieldset>
</form>

Demo here
Here is the code:
<html>
<body>
<div>Name <input type="text"></input></div><br>
<div>Day(s) of week</div>
<div style="margin-left: 120px;margin-top: -25px;">
<div><input type="checkbox" checked><br>Mo</input></div>
<div style="
width: 10px;
margin-left: 30px;
margin-top: -37px;">
<input type="checkbox" checked><br>Tu</input></div>
<div style="
width: 10px;
margin-left: 60px;
margin-top: -37px;">
<input type="checkbox" checked><br>We</input></div>
<div style="
width: 10px;
margin-left: 90px;
margin-top: -37px;">
<input type="checkbox" checked><br>Th</input></div>
<div style="
width: 10px;
margin-left: 120px;
margin-top: -37px;">
<input type="checkbox" checked><br>Fr</input></div>
<div style="
width: 10px;
margin-left: 150px;
margin-top: -37px;">
<input type="checkbox" checked><br>Sa</input></div>
<div style="
width: 10px;
margin-left: 180px;
margin-top: -37px;"><input type="checkbox" checked><br>Su</input>
</div>
</div>
<br>
<div>Validity
<select>
<option>January</option>
<option>February</option>
</select>
<select>
<option>January</option>
<option>February</option>
</select>
</div>
</body>
</html>

How to have 3 check boxes with their labels on a single line

I want to have three check boxes and their label in a single line as I have shown below.
I tried having check boxes inside table cells but the label is coming above the check box.I am a beginner in HTML.
So please provide me with a possible solution.
Thanks in advance!!!
USA[]----------------------------------ENGLAND[]----------------------------------AUSTRALIA[]
Here, by [] - I mean a check box.These three columns should uniformly occupy the html form's width.
Here i have used ---------------------------- to show that I want this much space between a check box of the first and label of the second.

you can use either table or div,span
for table
<table>
<tr>
<td>
<label>Hindi</label>
<input type="checkbox"/>
</td>
<td>
<label>English</label>
<input type="checkbox"/>
</td>
<td>
<label>French</label>
<input type="checkbox"/>
</td>
</tr>
</table>
But by using div,span you have to wright down some Style.
if you are using framework Bootstrap you can see more with less css here
Here is Fiddle

... or you can use a 1 x 1 table and keep it simple! You will be able to apply limited styling to each element using this approach.
<table>
<tr>
<td>USA</td>
<td><input type="checkbox" name="country1"></td>
<td>India</td>
<td><input type="checkbox" name="country2"></td>
<td>Greece</td>
<td><input type="checkbox" name="country3"></td>
</tr>
</table>

You can have all this elements in single div with its display:inline. With 3 child divs having uniform widths.
<div style="display:inline" style=" width:100%">
<div style=" width:33%; float:left">USA<input type="checkbox"></div>
<div style=" width:33%;float:left">ENGLAND<input type="checkbox"></div>
<div style=" width:33%;float:left">Australia<input type="checkbox"></div>
</div>

If you post the code for the table that you did, we can help you better, but you can do it like this:
<table style="width: 100%;">
<tr>
<td><div style="white-space: normal;">USA<input type="checkbox" /></div></td>
<td><div style="white-space: normal;">ENGLAND<input type="checkbox" /></div></td>
<td><div style="white-space: normal;">AUSTRALIA<input type="checkbox" /></div></td>
</tr>
</table>

You can also do like this
<div style="float:left;width:100px;">
<label>Hindi</label>
<input type="checkbox"/>
</div>
<div style="float:left;width:100px;" >
<label>English</label>
<input type="checkbox"/>
</div>
<div style="float:left;width:100px;">
<label>French</label>
<input type="checkbox"/>
</div>
Demo http://jsfiddle.net/7kzh9/1/

HTML
<form>
<div class="chk">
<label><input type="checkbox" /> USA</label>
</div>
<div class="chk">
<label><input type="checkbox" /> ENGLAND</label>
</div>
<div class="chk">
<label><input type="checkbox" /> AUSTRALIA</label>
</div>
<form>
CSS
.chk
{
float:left;
display:inline-block;
width:100px;
}
label {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
Fiddle
Output: