Difficulty aligning checkboxes in CSS - css

Question

I'm having difficulty lining up my checkboxes (under Weeks) with the other sections of my form (namely 2. Date & Time). In addition to this, I can't seem to get text to the right of the checkbox, it always seeems to appear underneath. How can I resolve this?
Here is my fiddle: http://jsfiddle.net/4YMaQ/2/
Code
label {
width: 8em;
float: left;
text-align: left;
display: block;
}
select {
width: 70%;
}
.slider, .slider2 {
width: 100%;
margin-top: 5px;
}
input {
border: none;
font-family: 'Segoe UI', arial, helvetica, sans-serif !important;
font-size: 14px;
padding: 0px;
background-color: transparent;
}
.clear {
clear: both;
}
.w50 {
width: 50%;
}
.weeks fieldset {
border: none;
outline: none;
}
.weeks fieldset > legend {
float: left;
margin-right: 3.8em;
}
.weeks fieldset .item {
overflow: hidden;
margin: 0;
padding: 0;
}
.weeks fieldset label {
float: none;
display: inline-block;
vertical-align: top;
}
.left {
float: left;
outline: none;
}
fieldset span {
display: inline-block;
width: 12em;
}
.weeks fieldset span {
display: inline-block;
width: 2em;
}
.request_heading {
font-size: 18px;
font-weight: bold;
}
.page {
padding-left: 20px;
font-family: 'Segoe UI', arial, helvetica, sans-serif;
padding-right: 20px;
font-size: 14px;
}

Answer 1

Your spans are 2em (you seem to have overwritten your 12em on the line below) where as your labels are 8em which is why they are wrapping onto the next line if you change your
if you change your spans to 3.5em and your labels to 1.5em you will get the following:
.weeks fieldset label {width:1.5em}
.weeks fieldset span {width:3em;}
http://jsfiddle.net/4YMaQ/6/
if you change your right margin on your legend you can fit five on a line:
.weeks fieldset > legend {margin-right:1.1em;}

Answer 2

Now just define your class .weeks fieldset span text-align:center; and
Define your .weeks fieldset label with:auto;
as like this
.weeks fieldset span{
text-align:center;
}
.weeks fieldset label{
width:auto;
}
Demo

Answer 3

Adjust the width of the .weeks fieldset, you force the checkboxes to go under weeks :)
.weeks fieldset {
border: none;
outline: none;
width: 50px;
}
It did not work anymore because other things changed, this is what you have to do:
.weeks fieldset .item {
margin: 0;
padding: 0;
width: 40px;
}
Remove overflow hidden and add a width to this field.
.weeks fieldset {
border: none;
outline: none;
width: 124px;
}
The width i provided might not be the width you want, adjust to your own needs :)

Answer 4

I changed the structure of your HTML to match your needs, I removed all the labels after the inputs.
Here's the fiddle, let me know if it's good enough for you.

Answer 5

Just Use display: inline-block; to your item class It works. Demo

Answer 6

Changing the display of your .item-Elements to inline-block should do the trick.
.weeks fieldset .item {
display: inline-block;
overflow: hidden;
margin: 0;
padding: 0;
}