How to position checkbox and text

Question

I'm having some trouble positioning these checkboxes with its respective text.

The actual checkboxes were hidden so that a personal style could be used.

Anyway, this is purely a CSS issue. The text should be positioned in front of the checkboxes.

I've been banging my head against the wall and couldn't do it...

What am I missing?

Thanks.

JSFiddle

HTML:

<div id="navigation">
    <form id="catform" action="#">
        <div class="kat1">
            <label>
            <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked"/><label for="thing" style="cursor: pointer"></label>
        </div>
<div>ITEM 1</div>
        <div class="kat2">
            <label>
            <input id="catswitch2" type="checkbox" onclick="shCat(2);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<div>ITEM 2</div>
        <div class="kat8">
            <label>
            <input id="catswitch8" type="checkbox" onclick="shCat(8);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<div>ITEM 3</div>
    </form>
</div>

CSS:

body {
    font-family: Arial, Helvetica, san-serif;
    font-size: 11px;
    line-height: 15px;
}

#navigation {
    left: 10px; top: 10px;
    width: 120px;
    border: 1px solid #000;
}

#navigation div {
    padding: 1px 4px 3px 1px;
    border: 1px none #000;
    margin: 0 10px 4px 0;
    height: 17px;
    width: 100%;
}

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label {
background: #FFF;
height: 11px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

input[type=checkbox]:checked + label {
background: #000;
height: 11px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

Answer 1

The text is placed inside news divs. divs take up the entire space especially on a new line. Get rid of the it. Instead put them in a span and also inside the parent, like this:

<div class="kat1">
  <label>
   <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked"/>
   <label for="thing" style="cursor: pointer"></label>
  </label>
  <span>ITEM 1</span>
</div>

body {
    font-family: Arial, Helvetica, san-serif;
    font-size: 11px;
    line-height: 15px;
}
#navigation {
    left: 10px;
    top: 10px;
    width: 120px;
    border: 1px solid #000;
}
#navigation div {
    padding: 1px 4px 3px 1px;
    border: 1px none #000;
    margin: 0 10px 4px 0;
    height: 17px;
    width: 100%;
}
input[type=checkbox] {
    display:none;
}
input[type=checkbox] + label {
    background: #FFF;
    height: 11px;
    width: 11px;
    display:inline-block;
    padding: 0 0 0 0px;
    border: 1px solid #000;
}
input[type=checkbox]:checked + label {
    background: #000;
    height: 11px;
    width: 11px;
    display:inline-block;
    padding: 0 0 0 0px;
    border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
    <form id="catform" action="#">
        <div class="kat1">
            <label>
                <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked" />
                <label for="thing" style="cursor: pointer"></label> 
            </label>
          <span>ITEM 1</span>
        </div>
        <div class="kat2">
            <label>
                <input id="catswitch2" type="checkbox" onclick="shCat(2);" />
                <label for="thing" style="cursor: pointer"></label> 
            </label>
          <span>ITEM 2</span>
        </div>
        <div class="kat8">
            <label>
                <input id="catswitch8" type="checkbox" onclick="shCat(8);" />
                <label for="thing" style="cursor: pointer"></label>
            </label>
          <span>ITEM 3</span>
        </div>
        <div class="kat14">
            <label>
                <input id="catswitch14" type="checkbox" onclick="shCat(14);" />
                <label for="thing" style="cursor: pointer"></label>
            </label>
          <span>ITEM 4</span>
        </div>
        <div class="kat9">
            <label>
                <input id="catswitch9" type="checkbox" onclick="shCat(9);" />
                <label for="thing" style="cursor: pointer"></label> 
            </label>
          <span>ITEM 5</span>
        </div>
    </form>
</div>

Answer 2

https://jsfiddle.net/b6aywnok/

CSS:

body {
    font-family: Arial, Helvetica, san-serif;
    font-size: 11px;
    line-height: 15px;
}

#navigation {
    left: 10px; top: 10px;
    width: 120px;
    border: 1px solid #000;
}

#navigation div {
    padding: 1px 4px 3px 1px;
    border: 1px none #000;
    margin: 0 10px 4px 0;
    height: 17px;
    width: 100%;
}

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label {
background: #FFF;
height: 11px;
margin-left:100px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

input[type=checkbox]:checked + label {
background: #000;
height: 11px;
width: 11px;
display:inline-block;
padding: 0 0 0 0px;
border: 1px solid #000;
}

h3
{
margin-left:50px;
margin-top:-25px;
}

html:

<body>
<div id="navigation">
    <form id="catform" action="#">
        <div class="kat1">
            <label>
            <input id="catswitch1" type="checkbox" onclick="shCat(1);" checked="checked"/><label for="thing" style="cursor: pointer"></label>
        </div>
<h3>ITEM 1</h3>
        <div class="kat2">
            <label>
            <input id="catswitch2" type="checkbox" onclick="shCat(2);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<h3>ITEM 2</h3>
        <div class="kat8">
            <label>
            <input id="catswitch8" type="checkbox" onclick="shCat(8);"/><label for="thing" style="cursor: pointer"></label>
        </div>
<h3>ITEM 3</h3>
    </form>
</div>
</body>

Answer 3

Something like that?

http://jsfiddle.net/5u2o1y1h/1/

Just add the ITEM text after the <label> tag.