EXPND—:001

Expanding Divs. Exploratory Setting. REF: ::: Fixed Left: http://jsfiddle.net/A8zLY/5/ ::: Fixed Right: http://jsfiddle.net/A8zLY/2/ ::: Article: http://colinaarts.com/articles/the-magic-of-overflow-hidden/

by Ken Watanabe

HTML

<div class="B" width="auto" height="auto">
    <svg class="B01" x="0px" y="0px" width="55.7px" height="300px">
        <rect x="0" y="0" width="55.7px" height="300px" />
    </svg>
    <svg class="B02" x="0px" y="0px" width="700px" height="300px">
        <path d="M655,136.3c18.9-9.8,29.6-30.8,29.6-55.3c0-53.1-33-81-85.7-81H0v51.4h594.6c24.4,0,36.4,9,36.4,32.6c0,23.6-11.6,32.6-35.1,32.6H0V168h595.9c32.1,0,48.4,13.3,48.4,40.3s-16.3,40.3-48.4,40.3H0V300h601c61.7,0,99-32.6,99-90.5C700,173.1,685,148.7,655,136.3z" />
    </svg>
</div> <!-- B -->

<h1><u>Expanding "B" Typography</u></h1>






<!--
<h1><u>Expanding Divs</u></h1>
<div id="base">
    <article class="whole">

        <div class="row a">
            <div class="a1"><img src="http://demosthenes.info/assets/svg/happy-monkey.svg" style="width: 100%; height: 200px;"/></div>
            <div class="a2"><img src="http://demosthenes.info/assets/svg/happy-monkey.svg" style="width: 200%; height: 200px;"/></div>
        </div> 
        
        <div class="row b">
            <div class="b1">B:002</div>
            <div class="b2">B:002</div>
        </div> 
        
        <div class="row c">
            <div class="c1">C:001</div>
            <div class="c2">C:002</div>
            <div class="c3">C:003</div>
        </div> 
        
    </article>
</div>

CSS

/* 
Expanding "B" Typography
Status: 

*/

.B { /* position: absolute; */
    position: fixed;
    top:10%;
    left:10%;
    overflow: hidden;
    width:30%;
    height: 30%;
    min-height: 300px;
    min-width: 210.876px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(25, 25, 25, 0.9);
    background: rgba(25, 25, 25, 0.1);
    }
   
.B01 {
    position: absolute;
    z-index:2;
    fill: rgba(25, 25, 201, 0.2);
    }

.B02 {
    position: relative;
    z-index:1;
    float:right;
    fill: rgba(25, 25, 201, 0.2);
    }
   







/* 
Expanding Divs
Status: Meh

*/





article.whole { /* Primary Wrap. 100% Setting. */
    width: 100%;
    height: 100%;
}

.row {
    height:200px;
    border:1px solid;
    margin: 30px 0 30px 0;
}

/* A */
.row.a {
    width:75%;
}
.a1 { /* height:200px; */
    width:200px;
    float:right;
    border: 1px solid rgba(14, 57, 148, 0.5);
    background: rgba(14, 57, 148, 0.2);
}
.a2 { /* height:200px; */
    width:auto;
    overflow:hidden;
    border: 1px solid rgba(14, 57, 148, 0.5);
    background: rgba(14, 57, 148, 0.2);
}

/* B */
.row.b {
    width:60%;
}
.b1 { /* height:200px; */
    width:200px;
    background:blue;
    float:left;
    border: 1px solid rgba(167, 66, 76, 0.5);
    background: rgba(167, 66, 76, 0.2);   
}   
.b2 { /* height:200px; */
    width:auto;
    background:red;
    overflow:hidden;
    border: 1px solid rgba(167, 66, 76, 0.5);
    background: rgba(167, 66, 76, 0.2);   
}

/* C */
.row.c {
    max-width: 500px;
    width: 70%;
    float: right;
}
.c1 { /* height:200px; */
    float:left;
    width:30%;
    border: 1px solid rgba(14, 57, 148, 0.5);
    background: rgba(14, 57, 148, 0.2);
}
.c2 { /* height:200px; */
    width:auto;
    overflow:hidden;
    border: 1px solid rgba(14, 57, 148, 0.5);
    background: rgba(14, 57, 148, 0.2);
}
.c3 { /* height:200px; */
    float:right;
    width:40%;
    border: 1px solid rgba(14, 57, 148, 0.5);
    background: rgba(14, 57, 148, 0.2);
}




   ...

JavaScript

//    REF


//+++ Expanding "B" typography
//::: Status: Functional
//::: http://jsfiddle.net/kenhimself/ts0h8zcd/


//+++ Expanding fixed divs that are aligned
//::: Status: Experimenting
//+++ http://stackoverflow.com/questions/1260122/expand-div-to-take-remaining-width
//::: Fixed Left: http://jsfiddle.net/A8zLY/5/
//::: Fixed Right: http://jsfiddle.net/A8zLY/2/
//::: Article: http://colinaarts.com/articles/the-magic-of-overflow-hidden/