Неудовлетворительные появление

Question

Я пытаюсь сделать интерфейс выглядеть так:

Но вместо этого, он выглядит следующим образом:

Мой код заключается в следующем, и я не знаю, как мне изменить его, чтобы все выглядело правильно.

 <style type="text/css"> 
    #choose_div{ 
     width: 20%; 
     height: auto; 
     padding: 1px; 
     left: 0px; 
     /*border: 2px;*/ 
     float:left; 
     box-sizing:border-box; 
    } 
    #frame_div{ 
     float:right; 
     right:0px; 
     height: auto; 
     width: 80%; 
     border: 2px 2px 2px 2px; 
     position: relative; 
     box-sizing:border-box; 

    } 
    #content{ 
     vertical-align: middle; 
    } 
    .li_div{ 
     padding-top: 3px; 
     vertical-align: middle; 
     height: 30%; 
     width: auto; 
    } 
    .li_div img{ 

     resize:both; 
     padding-right: 10px; 
     /*width: 50px; 
     height: 50px; 
     max-width: 40px; 
     max-height: 40px; 
     left: li_div.width/2;*/ 
    } 
    .li_choose{ 
     height: 20%; 
     width: 100%; 
    } 
</style> 

<div id="content"> 
    <div id="choose_div"> 
     <ul> 
     <li class="li_choose"> 
      <div class="li_div"> 
      <p>Save</p> 
       <img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%"> 
      <hr> 
      </div> 
     </li> 

     <li class="li_choose"> 
      <div class="li_div"> 
      <p>Recover</p> 
      <img src="arrow.jpg" id="arrow_recover" style="width:10%;height:10%;"> 
      </div> 
     </li> 
     </ul> 
    </div> 
    <div id="frame_div"> 
    <iframe id="frame_opened"> 
    </div> 
</div> 

Я был бы очень благодарен, если бы кто-нибудь мог мне помочь. Заранее спасибо.
Примечание: «вещь», показывающая ошибку, в настоящее время является моим iframe.

Answer 1

Вы должны плавать: слева; выбор-div и не плавать: справа iframe div

Answer 2

<style type="text/css"> 
    html,body{margin:0px;} 
    p{  font-family:Tahoma; font-size:30px ;} 
    #choose_div{ 
     width: 20%; 
     height: auto; 
     padding: 1px; 
     left: 0px; 
    float:left; 
    } 

    #content{ 
    list-style:none; 
     vertical-align: middle; 
    } 
    .li_div{ 
     padding-top: 3px; 
     vertical-align: middle; 
     height: 30%; 
     width: auto; 
    } 

ul li{ 
list-style:none; 
} 
    .li_div img{ 
     padding-right: 10px; 
     /*width: 50px; 
     height: 50px; 
     max-width: 40px; 
     max-height: 40px; 
    } 
    .li_choose{ 
     height: 20%; 
     width: 100%; 
    } 

    .hr{ display:none;margin-left:0px 
    color:black; 
    background-color: #000; 
    height: 5px;} 

    #frame_div{ 
    float:left; 
     height: 100%; 
     width: 80%; 
    } 

</style> 

<div id="content"> 
    <div id="choose_div"> 
     <ul> 
     <li class="li_choose"> 
      <div class="li_div"> 
      <p>Save &#10157;</p> 
      <hr style="height:3px;background-color: #000;" /> 
      </div> 
     </li> 

     <li class="li_choose"> 
      <div class="li_div"> 
      <p>Recover &#10157;</p> 

      </div> 
     </li> 
     </ul> 
    </div> 

    <div id="frame_div"> 
    <iframe border="1" src="empty.htm" style="border-style: solid;width: 79%; background-color: #555;height: 100%;">Here is the video</iframe> 
    </div> 
</div>