place input checkbox in same line of label - css

Question

i am struggling to place input check-box in same line x-horizontal as in label. My check-box is placing in 2nd line. I have a div with background to image then label and then check-box. The margin between image and label div and margin between label and check need to be same. Many thanks in advance.
<div id="map_Marker_Check_Block">
<div class="markerDiv" id="maker_school"><div class="marker_label">School</div> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <div class="marker_label">Gym</div> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
</div>
css
#map_Marker_Check_Block {
background-color:yellow;
display:block;
position:absolute;
width:20em;
height:400px;
top:0;
right:0;
z-index:10;
overflow-y:auto;
}
.marker_label {
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
float:right;
}
.markerDiv {
width:19em;
height:48px;
margin-left:5px;
}
#maker_school { background: url("img1.png") no-repeat; }
#maker_gym{ background: url("img2.png") no-repeat; }

Answer 1

http://jsfiddle.net/XUErp/
.marker_label {
float:left;
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
margin-top:15px;
float:right;
}

Answer 2

Use TOP and POSITION styles for checkbox:
.marker_ckeckbox {
float: right;
position: relative;
top: -35px;
}
But, I think the elements must be structured in a different way.
Or as Musa said use label instead of div:
Sample: http://jsfiddle.net/qaprB/1/

Answer 3

try this
<div class="markerDiv" id="maker_school"><label class="marker_label">School</label> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <label class="marker_label">Gym</label> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
css
.marker_ckeckbox {
float:right;
position: relative;
top: -35px;
}
.marker_label {
display:block;
}