Is there a way to make these radiobuttons hover over the topchoice and bottomchoice divs? I may need to adjust the width of choicefirstleft and choicesecondleft, potentially making it 100%. However, when the width approaches 100%, the radiobutton shifts down as seen in the example on jsfiddle...
I'm unsure how to ensure that these buttons remain above the colored divs. Any suggestions?
HTML:
<div id="results">
<div id="topchoice">
<div class="result">
<?php echo $topresult; ?>
</div>
<div id="choicefirstleft">
<label for="yes">Yes</label>
</div>
<input type="radio" id="yes" value="1" name="votingvalue"></input>
</div>
<div id="bottomchoice">
<div class="result">
<?php echo $bottomresult; ?>
</div>
<div id="choicesecondleft">
<label for="no">No</label>
</div>
<input type="radio" id="no" value="2" name="votingvalue"></input>
</div>
</div>
CSS:
#topchoice{
margin-top: 40px;
overflow:hidden;
background-color: #000;
opacity: 0.9;
}
#bottomchoice{
margin-top: 5px;
overflow:hidden;
background-color: #000;
opacity: 0.9;
}
#choicefirstleft{
width:30%;
background-color:greenyellow;
float:left;
z-index: 1;
}
#choicesecondleft{
width:99%;
float: left;
background-color: red;
z-index: 1;
}
#results{
font-size: x-large;
width: 50%;
margin:0 auto;
color: white;
overflow:hidden;
}
#results input{
float:right;
z-index: 4;
}