Page Layout

left text responsive, vertical and right align

by nosir

HTML

<div class="wrap">
    <div class="right"></div>
    <div class="left">
        <div class="content">
            <div class="cell">Lorem Ipsum is simply dummy text of the printing</div>
        </div>
    </div>
</div>

SCSS

.wrap {
    width: 100%;
    height: 50px;
    &:after, &:before {
        content:"";
        display: table;
    }
    &:after {
        clear: both;
    }
}
.left {
    height: inherit;
    text-align: right;
    overflow: hidden;
    .content {
        background: #EEE;
        display: table;
        /* this is the essential line */
        width: 100%;
        height: inherit;
        .cell {
            display: table-cell;
            vertical-align: middle;
        }
    }
}
.right {
    float: right;
    height: inherit;
    width: 100px;
    background: #FC0;
}