これらのラジオボックスを div の topchoice と bottomchoice の上に置きたいと思います。「choicefirstleft」と「choicesecondleft」の div の幅を変更すると、幅が実際には 100% になることがあります。jsfiddle の例でわかるように、幅が 100% に近づくとすぐに、ラジオボタンが下に移動します...
これらのボタンが色付きの div の上にあるようにするにはどうすればよいですか? 手がかりがありません。
HTML:
<div id="results">
<div id="topchoice">
<div class="result">
<?php echo $topresult; ?>
</div>
<div id="choicefirstleft">
<label for="yes">Ja</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">Nein</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;
}