static void

CSS3 Layout

Written September 2012- specs and browser support will change!


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus eleifend tincidunt. Nam adipiscing nisl ut arcu congue consectetur. Vivamus tincidunt felis at risus luctus bibendum eget sed eros. Nam fermentum, nulla et dignissim tincidunt, massa elit dignissim massa, vel semper est purus vitae lorem. Integer nec varius libero. Donec sodales, ligula vel mattis convallis, diam orci vehicula diam, ac iaculis justo orci non tortor. Aliquam sit amet magna vel elit condimentum aliquam id eget magna. Aenean in rhoncus urna. Nullam porttitor viverra risus eu faucibus. In et sem massa. Aenean eget odio eleifend purus rhoncus ornare quis in mi. Donec urna nibh, posuere id dictum elementum, ultrices at orci. Nunc lorem dolor, scelerisque ut laoreet vitae, egestas non mi. Aliquam non scelerisque metus. Donec nec turpis eu quam condimentum cursus.
[-webkit-|-moz-]column-count: 2
column-width: 200px; columns: width or count; column-rule: 1px dashed green; /* break-before: column | avoid-column */

Box sizing

The default box model (width + padding + border) is difficult so the old IE model, now called box-content, is preferred (width = box + padding + border). NB: FF is -moz-prefixed, IE 8+/Chrome are not prefixed.



/* set up flexibox */
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex; /* FF is behind a preference */
display: flex;
child 1
child 2
child 3

Default for sub-blocks (NB: uses writing direction, clipping of parent)

Exclusions (Wrap-flow)

Free-floats. This is IE 10 only (end 2012), -ms-warp-flow. Auto means no exclusion (overlap), both means both sides.

Exclusion elements define exclusion areas that contribute to their containing block's wrapping context. As a consequence, exclusions impact the layout of their containing block's descendants. Elements layout their inline content in their content area and wrap around the areas in their associated wrapping context. If the element is itself an exclusion, it does not wrap around its own exclusion shape and the impact of other exclusions on other exclusions is controlled by the ‘z-index’ property as explained in the exclusions order section.

Grid layout

Assign the container

/* set up container with rows and columns */
#grid {
    display: -ms-grid;
    /* space delimited columns
    column 1 = auto, size of content
    column 2 = 200px, fixed width
    column 3 = 2fr, 2 fractions of remaining space (2fr+1fr = 3, so 2/3rds)
    column 4 = 1fr, 1 fraction of remaining space (2fr+1fr = 3, so 1/3rd)
    -ms-grid-columns: auto 200px 2fr 1fr;
    /* space delimited rows
    max-content is maximum height of any elements. Also min-content, minmax(x,y)
    -ms-grid-rows: auto max-content 10em;

The assign items to columns and rows.

#item {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-align: end; /* align to end of the column */
  -ms-grid-row-align: center; /* align to center of row */

Two items in the same row will overlay (use z-index)