javascript - A circle element next to a fluid rounded element -

is following layout possible css? if not, there better solution current js solution? see fiddle complete example.

+--------------------+ |                    | |                    | |                    | |                    | |                    | |                    | |                    | |                    | |                    | |--------------------+  |+----+  +----------+|    container height in percentage, e.g. 20% of window || 1  |  | 2        ||    button 1: circle based on container height |+----+  +----------+|    button 2: fill available space , round corners  +--------------------+ 

the basic issue first element needs circle, i.e. rounded square, based on height of container. , second element should fill rest of space same border-radius.

following how solved js, not seem reliable on mobile devices. , project mobile-only. also, if layout dependent on js, cause other trouble when doing fancy transitions etc. css.

fiddle: http://jsfiddle.net/n52x1ws1/3/

$(document).ready(function(){      var height = $(".device-fluid").find(".btn-circle").height();      var borderradius = height / 2;            $(".device-fluid").find(".btn-circle").css("width", height);  	$(".device-fluid").find(".btn-circle").css("border-radius", borderradius);            var fluidwidth = $(".device-fluid").find(".container").width() - height - 15;            $(".device-fluid").find(".btn-fluid").css("width", fluidwidth);      $(".device-fluid").find(".btn-fluid").css("border-radius", borderradius);  });

* {      box-sizing: border-box;      font-family: sans-serif;  }  .device {      display: inline-block;      position: relative;      width: 320px;      height: 480px;      border: 2px solid #ccc;      margin: 30px;      text-align: center;  }  .label {      margin-top: 30px;  }  .container {      position: absolute;      bottom: 0;      width: 100%;      height: 20%;      padding: 15px;      background: #f7f7f7;  }  .btn {      height: 100%;  }  .btn-circle {      float: left;  }  .btn-fluid {      float: right;  }    .device-fixed .btn-circle {      width: 66px; /* easy since know height */      border-radius: 33px;      background: #2ecc71;  }  .device-fixed .btn-fluid {      width: 205px; /* available space minus 15px margin */      border-radius: 33px;      background: #27ae60;  }    .device-fluid .btn-circle {      width: 20%; /* needs equal height */      border-radius: 50%;      background: #2ecc71;  }  .device-fluid .btn-fluid {      width: 75%; /* needs fill rest of available space minus 15px margin */      border-radius: 50%;      background: #27ae60;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <div class="device device-fixed">      <div class="label">fixed</div>      <div class="container">          <div class="btn btn-circle"></div>          <div class="btn btn-fluid"></div>      </div>  </div>    <div class="device device-fluid">      <div class="label">fluid js</div>      <div class="container">          <div class="btn btn-circle"></div>          <div class="btn btn-fluid"></div>      </div>  </div>

i'm not sure mean by

container height in percentage, e.g. 20% of window

if means height of container determined size of viewport can use viewport units. 1vh equals 1% of viewport height.

.container {     height: 20vh; } 

you can make circle based on height:

.btn-circle{     height: 20vh;     width: 20vh;     border-radius: 10vh; } 

the next div should fill available space

.btn-fluid{     height: 20vh;     width: calc(100vw - 20vh);  /*100% of viewport width minus space square*/     border-radius: 10vh; } 

it looks in fiddle.