http://stackoverflow.com/questions/10604586/laying-out-page-elements-with-css

dabblet.css

/**
 * http://stackoverflow.com/questions/10604586/laying-out-page-elements-with-css
 */
#parent {
    background-color: #efefef;
    position: relative;
    width: 400px;
}

.right {
    float: right;
    background: #cccccc;
    width: 100px;
}

#main {
    position: relative;
    background-color: #cccc00;
    width: 300px;
    overflow: hidden;
}

.right-main {
    float: right;
    width: 100px;
    background-color: #cc00cc;
}
#content {
	display: table-cell
}

#rest {
    clear: both;
    background-color: #00cccc;
}

​

dabblet.html

<div id="parent">
    <div class="right">
        Right column:
        The amount of content
        here can be quite large,
        to demonstrante the problem
        that I'm having with this
        layout.
    </div>
    <div id="main">
        <div class="right-main">
            right-floating part
            of main area.
        </div>

        <div id="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget risus libero. Nunc ornare pretium quam, a blandit magna suscipit viverra. Sed eu metus ut justo viverra tempus id in magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vitae eros nec mauris vestibulum dictum.
	</div>
        <div id="rest">
            I want this to be below the main
            right column but not below the
            overall right column
        </div>
</div>
​

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}