The non-flexbox flexible box

A flexbox built without using HTML5 flexboxes

by Lucas Krause

HTML

<div class="a"></div>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur consectetur rhoncus. Fusce elementum, lacus eget lobortis lobortis, massa neque cursus risus, ut fermentum purus lacus ut arcu. Phasellus dolor diam, porttitor at interdum at, tincidunt sed nisl. Praesent rhoncus, purus at luctus tempor, nisi erat adipiscing neque, ac condimentum enim elit et ante. Nulla nec augue nec mi bibendum cursus in id tellus. Integer dapibus, libero non suscipit lobortis, sapien nisl rhoncus risus, vitae fermentum est felis eget lectus. Integer ut leo risus. Quisque pharetra magna semper ligula vulputate sagittis. Curabitur volutpat mauris sit amet sem viverra nec suscipit leo hendrerit. Praesent tempus imperdiet volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus risus mi, tristique a posuere ut, scelerisque non elit. Mauris consectetur sapien ac velit ornare quis rutrum augue molestie. Praesent et est vitae mi dapibus tincidunt. Nunc ut posuere felis. Phasellus quis turpis tellus.<br /><br />Duis posuere purus nec mi lacinia sed hendrerit magna venenatis. Integer justo lorem, cursus et laoreet ut, tincidunt non nisi. Nunc volutpat posuere augue et pulvinar. Aliquam suscipit, lectus nec euismod ultricies, sapien lacus porta purus, eu ultrices metus nibh ut leo. Curabitur cursus pretium orci, ut faucibus urna fringilla vehicula. Praesent rhoncus ullamcorper accumsan. Curabitur ornare volutpat auctor. Aliquam sollicitudin augue lorem, non gravida turpis.
</div>

CSS

body {
    margin:40px;
}
.a {
    float:left;
    width:100px;
    height:100px;
    background-color:lime;
}
.b { /*this box will stretch over the remaining space right to `.a`*/
    overflow:hidden; /*overrides default `overflow:visible` and, as described by w3c in the specs, establishes a new block formatting context (http://www.w3.org/TR/CSS2/visuren.html#block-formatting) for `.b` which will prevent `.b`'s content from floating around `.a`*/
    padding-left:10px; /*ment as margin but a margin has no effect*/
}

JavaScript

/**
 * Found this trick here http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
 * Came up to the page from here http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 */