Aspect Ratio + Media Queries

Always a square on the left side, increasing the right side proportional width once resolution is down to iPhone size

by bgrins

HTML

<div class='container'>
    <div class='outer'>
        <div class='fill'></div>
        <div class='inner-top'>
            <div class='square'>Always a square</div>
            <div class='right'>% width</div>
        </div>
    </div>
    <div class='bottom'>
        Bottom
    </div>
</div>

CSS

/* Based off of: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */

.container {
    width: 90%;
    max-width: 800px;
    padding: 10px;    
    background-color: #333;
    display:inline-block;
    border: solid 10px #ddd;
    border-radius: 10px;
}

.outer {
  position:relative; 
  width: 100%;
  display:inline-block;
}

.inner-top {
   position:absolute; top:0; left:0; bottom:0; right:0;
}

.bottom { 
    background: lightblue;
    margin-top: 4px;
}

.square{ 
    
    position: absolute;
    top:0;left:0;bottom:0;right:20%;
    background:orange; 
}
.right {
    position: absolute;
    top:0;right:0;bottom:0;left:83%;
    background: purple;
}
.fill { 
    *height: 80%;
    margin-top: 80%;  /* Same as square width */
}

@media (max-width: 480px) {
    .square { right: 51%; background: blue; }
    .right { left: 51%; }
    .fill { margin-top: 49%; } 
}