gunnarbittersmann

/**
 * fixed footer behind
 */

body
{
	margin: 0;
	padding: 0;
	background-color: white;
	font: 1.2em/3 Georgia;

gunnarbittersmann

/**
 * right edge of box at given distance from left viewport edge
 */
 
#a
{
	position: absolute;
	top: 100px;
	right: 100%;
	transform: translateX(100px);

gunnarbittersmann

/**
 * The first commented line is your dabblet’s title
 */
 
 a
 {
 	font: 1.5em/1 Georgia;
 	display: inline-block;
 	margin: 0 1em;
 }

gunnarbittersmann

/**
 * figure caption appears
 * deprecated by http://dabblet.com/gist/e1c363fdb1212f7a5aa7c7e62c349bd3
 */

*
{
	box-sizing: border-box;
}

gunnarbittersmann

/**
 * figure caption disappears, wrong effect
 */

*
{
	box-sizing: border-box;
}

html

gunnarbittersmann

/**
 * figure caption disappears
 */

html
{
	background: hsl(30, 60%, 90%);
}

figure

gunnarbittersmann

/**
 * width-dependent line height
 */

html
{
	padding: 0 2em;
	font: 1.5em/1.5 Georgia;
	line-height: calc(1.1em + 1vw);
}

gunnarbittersmann

/**
 * sticky header in box
 */

div
{
	margin: auto;
	width: 16em;
	height: 26em;
	padding: 0 1em;

gunnarbittersmann

/**
 * Quadratisch, praktisch, gut
 */

div
{
	position: relative;
	display: inline-block;
	margin: 1em;
	width: 30%;

gunnarbittersmann

/**
 * Quadratisch, praktisch, gut
 */

div
{
	position: relative;
	display: inline-block;
	margin: 1em;
	width: 30%;