Положите радио-кнопку над диваном, когда больше нет места

Question

Я хочу, чтобы эти радиобоксы наводили на верхний выбор и снизу. Я изменю ширину divs «choicefirstleft» и «choiceecondleft», и может случиться так, что ширина фактически получит 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; 
    } 

http://jsfiddle.net/K3Qgf/

Answer 1

Я сделал контейнер

position: relative; 

, а затем

position: absolute; 

на радио-кнопок (с новым классом)

http://jsfiddle.net/K3Qgf/1/