Search

EZ-CSS Putting less in table-less layouts.

“Downloads”

You can either:

copy the rules from the textareas below,
download the CSS files (links below),
check the repository at

Available files:

For the code snippets from the layouts page.

ez.css (uncompressed - 3.401 kb): Original recipe
ez-min.css (minified - 1.012 kb): No comments, no whitespace
ez-filters.css (uncompressed - 3.233 kb): This file contains the same rules as in ez.css. It is smaller because it uses the "_property" hack instead of "star html" for IE lt 7, but it will not validate.
ez-filters-min.css (minified - 0.915 kb): No comments, no whitespace
ez-plug.css (uncompressed - 2.735 kb): This file does not use HTML elements as selectors, so can be used with any other style sheet, framework, etc.
ez-plug-min.css (minified - 0.857 kb): No comments, no whitespace
ez-plug-filters.css (uncompressed - 2.661 kb): This file does not use HTML elements as selectors, hence can be used along any other style sheet, framework, etc. It is smaller because it uses the "_property" hack instead of "star html" for IE lt 7, but it will not validate.
ez-plug-filters-min.css (minified - 0.774 kb): No comments, no whitespace

For the code snippets from the prototyping page.

ez-proto.css (uncompressed - 1.086 kb): This file is for building prototypes. It does not style the last "column" as this solution takes advantage of the fieldset used in the markup of the modules and layouts.
ez-proto-min.css (minified - 0.413 kb): No comments, no whitespace

ez.css

Development (uncompressed - 3.401 kb)

ez.css

/* 2009 - 2010 (c) | ez-css.org
 * ez.css ::  version 1.3 :: 03132010
 *
 * This style sheet caters for IE 5 browsers. 
 * With this style sheet, use the snippets from http://www.ez-css.org/layouts 
*/

/*
 * auto-centering in IE 5
 * we reset this value in the next rule so content is left aligned. 
 */
 
body {text-align: center;}

/* 
 * This wrapper, first child of body, is used to wrap "ez-css" modules. 
 * It will auto-center if it is given a width smaller than the width of the viewport.
 * Position relative is used to create a stacking context from the start (to prevent z-index issues). 
 * overflow:hidden is used to create a block formatting context, but if you give this element a width you can replace this declaration with display:inline-block
 */

.ez-mw {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	position :relative;
	z-index: 1;
	text-align: left;
	overflow: hidden;
}

/*
 * to make sure modules clear previous containers
 */

.ez-wr {clear: left;}

/*
 * this is the clearfix method
 * we rely on this to contain floats in "stand-alone" modules 
 */
 
.ez-wr:after,
.ez-box:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

/*
 * hacks for IE 5 (Win and Mac)
 * (min-height is the "hasLayout" trigger used for IE7)
 */
 
.ez-wr,.ez-box,.ez-last {display: inline-block;min-height: 0;}    
/* hides from IE-mac \*/  
* html .ez-wr,
* html .ez-box,
* html .ez-last {height: 1%;}  
.ez-wr,.ez-box,.ez-last {display: block;}  
/* end hide from IE-mac */

/*
 * the last DIV in the HTML flow (a column) must create a new block formatting context.
 * by default, we rely on "overflow:hidden", but if this creates an issue with your design, then try one of these classes instead: 
 * ez-oa
 * ez-dt 
 * ez-it
 * ez-tc
 * ez-ib
 */
 
.ez-oh {
	overflow: hidden;
}

* html .ez-oh {
	overflow: visible;
}

.ez-oa {
	overflow: auto;
}
.ez-dt {
	display: table;
}

.ez-it {
	display: inline-table;
}
.ez-tc {
	display: table-cell;
}

.ez-ib {
	display: inline-block;
}

/* 
 * DIVs to be columns
 * we float them left or right depending on module or layout
 * the negative margin is used to fix a IE6 bug (3px jog).
 */
.ez-fl {
	float: left;
}

* html .ez-fl {
	margin-right: -3px;
}

.ez-fr {
	float: right;
}

* html .ez-fr {
	margin-left: -3px;
}

/*
 * every floated column in a module or layout needs a width
 * here we have 5 default values: 1/4, 1/3, 1/2, 2/3 and 3/4
 */

.ez-25 {width: 25%;}
.ez-33 {width: 33.33%;}
.ez-50 {width: 50%;}
.ez-66 {width: 66.66%;}
.ez-75 {width: 75%;}

/* 
 * the following classes are used to make columns that are siblings overlap by 1 pixel (to vertically align 1 pixel borders between containers)
 * for this to work, this class must be applied to the following elements: 
 * - column 1 of Module 2A, 
 * - column 2 of Module 3A,
 * - column 1 of Module 3B, 
 * - column 3 of Module 4A, 
 * - column 1 of Module 4B, 
 * - column 1 in column 1 of Module 4B, 
 * - column 2 in column 1 of Module 4B 
 */
 
.ez-negmr {
	margin-right: -1px;
}

* html .ez-negmr {
	margin-right:-4px;
}

/*
 * (star html hack is used here because of the cascade, to override "* html .ez-fl")
 * same as above, but for these elements:
 * - column 1 of Module 3A,
 * - column 1 of Module 4A,
 * - column 2 of Module 4A 
 */
 
* html .ez-negmx,
.ez-negmx {
	margin-right: -1px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 2B,
 * - column 2 of Module 3B 
 */
 
.ez-negml {
	margin-left: -1px; 
}

* html .ez-negml {
	margin-left:-4px;
}

Production (minified - - 1.012 kb)

ez-min.css

/* 2009 - 2010 (c) | ez-css.org
 * ez-min.css :: version 1.3 :: 03132010
 */
body{text-align:center}.ez-mw{margin-right:auto;margin-left:auto;text-align:left;position:relative;z-index:1;text-align:left;overflow:hidden}.ez-wr{clear:left}.ez-wr:after,.ez-box:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ez-wr,.ez-box,.ez-last{display:inline-block;min-height:0}/* \*/* html .ez-wr,* html .ez-box,* html .ez-last{height:1%}.ez-wr,.ez-box,.ez-last{display:block}/* */.ez-oh{overflow:hidden}* html .ez-oh{overflow:visible}.ez-oa{overflow:auto}.ez-dt{display:table}.ez-it{display:inline-table}.ez-tc{display:table-cell}.ez-ib{display:inline-block}.ez-fl{float:left}* html .ez-fl{margin-right:-3px}.ez-fr{float:right}* html .ez-fr{margin-left:-3px}.ez-25{width:25%}.ez-33{width:33.33%}.ez-50{width:50%}.ez-66{width:66.66%}.ez-75{width:75%}.ez-negmr{margin-right:-1px}* html .ez-negmr{margin-right:-4px}* html .ez-negmx,.ez-negmx{margin-right:-1px}.ez-negml{margin-left:-1px}* html .ez-negml{margin-left:-4px}

ez-filters.css

Development (uncompressed - 3.233 kb)

ez-filters.css

/* 2009 - 2010 (c) | ez-css.org
 * ez-filters.css :: version 1.2 :: 03132010
 *
 * This style sheet caters for IE 5 browsers. It uses a CSS hack and won't validate
 * With this style sheet, use the code snippets from http://www.ez-css.org/layouts 
 */

/*
 * auto-centering in IE 5
 * we reset this value in the next rule so content is left aligned. 
 */
 
body {text-align: center;}

/* 
 * This wrapper, first child of body, is used to wrap "ez-css" modules. 
 * It will auto-center if it is given a width smaller than the width of the viewport.
 * Position relative is used to create a stacking context from the start (to prevent z-index issues). 
 * overflow:hidden is used to create a block formatting context, but if you give this element a width you can replace this declaration with display:inline-block
 */

.ez-mw {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	position :relative;
	z-index: 1;
	text-align: left;
	overflow: hidden;
}

/*
 * to make sure modules clear previous containers
 */

.ez-wr {clear: left;}

/*
 * this is the clearfix method
 * we rely on this to contain floats in "stand-alone" modules 
 */
 
.ez-wr:after,
.ez-box:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

/*
 * hacks for IE 5 (Win and Mac)
 * (min-height is the "hasLayout" trigger used for IE7)
 */
 
.ez-wr,.ez-box,.ez-last {display: inline-block;min-height: 0;}    
/* hides from IE-mac \*/  
.ez-wr,
.ez-box,
.ez-last {_height: 1%;}  
.ez-wr,.ez-box,.ez-last {display: block;}  
/* end hide from IE-mac */

/*
 * the last DIV in the HTML flow (a column) must create a new block formatting context.
 * by default, we rely on "overflow:hidden", but if this creates an issue with your design, then try one of these classes instead: 
 * ez-oa
 * ez-dt 
 * ez-it
 * ez-tc
 * ez-ib
 */
 
.ez-oh {
	overflow: hidden;
	_overflow: visible;
}

.ez-oa {
	overflow: auto;
}
.ez-dt {
	display: table;
}

.ez-it {
	display: inline-table;
}
.ez-tc {
	display: table-cell;
}

.ez-ib {
	display: inline-block;
}

/* 
 * DIVs to be columns
 * we float them left or right depending on module or layout
 * the negative margin is used to fix a IE6 bug (3px jog).
 */
.ez-fl {
	_margin-right: -3px;
	float: left;
}

.ez-fr {
	_margin-left: -3px;
	float: right;
}

/*
 * every floated column in a module or layout needs a width
 * here we have 5 default values: 1/4, 1/3, 1/2, 2/3 and 3/4
 */

.ez-25 {width: 25%;}
.ez-33 {width: 33.33%;}
.ez-50 {width: 50%;}
.ez-66 {width: 66.66%;}
.ez-75 {width: 75%;}

/* 
 * the following classes are used to make columns that are siblings overlap by 1 pixel (to vertically align 1 pixel borders between containers)
 * for this to work, this class must be applied to the following elements: 
 * - column 1 of Module 2A, 
 * - column 2 of Module 3A,
 * - column 1 of Module 3B, 
 * - column 3 of Module 4A, 
 * - column 1 of Module 4B, 
 * - column 1 in column 1 of Module 4B, 
 * - column 2 in column 1 of Module 4B 
 */
 
.ez-negmr {
	margin-right: -1px;
	_margin-right:-4px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 3A,
 * - column 1 of Module 4A,
 * - column 2 of Module 4A 
 */
 
.ez-negmx {
	margin-right: -1px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 2B,
 * - column 2 of Module 3B 
 */
 
.ez-negml {
	margin-left: -1px; 
	_margin-left:-4px;
}

Production (minified - 915 bytes)

ez-filters-min.css

ez-plug.css

Development (uncompressed - 2.735 kb)

ez-plug.css

/* 2009 -2010 (c) | ez-css.org
 * ez-plug.css :: version 1.1 :: 01182010
 *
 * This style sheet can be added to any document (there is no styling of HTML elements) 
 * With this style sheet, use the code snippets from http://www.ez-css.org/layouts 
 */

/*
 * this is the clearfix method
 * we rely on this to contain floats in "stand-alone" modules 
 */
 
.ez-wr:after,
.ez-box:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

/*
 * hacks for IE 5 (Win and Mac)
 * (min-height is the "hasLayout" trigger used for IE7)
 */
 
.ez-wr,.ez-box,.ez-last {display: inline-block;min-height: 0;}    
/* hides from IE-mac \*/  
* html .ez-wr,
* html .ez-box,
* html .ez-last {height: 1%;}  
.ez-wr,.ez-box,.ez-last {display: block;}  
/* end hide from IE-mac */

/*
 * the last DIV in the HTML flow (a column) must create a new block formatting context.
 * by default, we rely on "overflow:hidden", but if this creates an issue with your design, then try one of these classes instead: 
 * ez-oa
 * ez-dt 
 * ez-it
 * ez-tc
 * ez-ib
 */
 
.ez-oh {
	overflow: hidden;
}

* html .ez-oh {
	overflow: visible;
}

.ez-oa {
	overflow: auto;
}
.ez-dt {
	display: table;
}

.ez-it {
	display: inline-table;
}
.ez-tc {
	display: table-cell;
}

.ez-ib {
	display: inline-block;
}

/* 
 * DIVs to be columns
 * we float them left or right depending on module or layout
 * the negative margin is used to fix a IE6 bug (3px jog).
 */
.ez-fl {
	float: left;
}

* html .ez-fl {
	margin-right: -3px;
}

.ez-fr {
	float: right;
}

* html .ez-fr {
	margin-left: -3px;
}

/*
 * every floated column in a module or layout needs a width
 * here we have 5 default values: 1/4, 1/3, 1/2, 2/3 and 3/4
 */

.ez-25 {width: 25%;}
.ez-33 {width: 33.33%;}
.ez-50 {width: 50%;}
.ez-66 {width: 66.66%;}
.ez-75 {width: 75%;}

/* 
 * the following classes are used to make columns that are siblings overlap by 1 pixel (to vertically align 1 pixel borders between containers)
 * for this to work, this class must be applied to the following elements: 
 * - column 1 of Module 2A, 
 * - column 2 of Module 3A,
 * - column 1 of Module 3B, 
 * - column 3 of Module 4A, 
 * - column 1 of Module 4B, 
 * - column 1 in column 1 of Module 4B, 
 * - column 2 in column 1 of Module 4B 
 */
 
.ez-negmr {
	margin-right: -1px;
}

* html .ez-negmr {
	margin-right:-4px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 3A,
 * - column 1 of Module 4A,
 * - column 2 of Module 4A 
 */
 
.ez-negmx {
	margin-right: -1px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 2B,
 * - column 2 of Module 3B 
 */
 
.ez-negml {
	margin-left: -1px; 
}

* html .ez-negml {
	margin-left:-4px;
}

Production (minified - 857 bytes)

ez-plug-min.css

ez-plug-filters.css

Development (uncompressed - 2.661 kb)

ez-plug-filters.css

/* 2009 -2010 (c) | ez-css.org
 * ez-plug-filters.css :: version 1.1 :: 01182010
 *
 * This style sheet can be added to any document (there is no styling of HTML elements). It uses a CSS hack and won't validate. 
 * With this style sheet, use the code snippets from http://www.ez-css/layouts 
 */

/*
 * this is the clearfix method
 * we rely on this to contain floats in "stand-alone" modules 
 */
 
.ez-wr:after,
.ez-box:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

/*
 * hacks for IE 5 (Win and Mac)
 * (min-height is the "hasLayout" trigger used for IE7)
 */
 
.ez-wr,.ez-box,.ez-last {display: inline-block;min-height: 0;}    
/* hides from IE-mac \*/  
.ez-wr,
.ez-box,
.ez-last {height: 1%;}  
.ez-wr,.ez-box,.ez-last {display: block;}  
/* end hide from IE-mac */

/*
 * the last DIV in the HTML flow (a column) must create a new block formatting context.
 * by default, we rely on "overflow:hidden", but if this creates an issue with your design, then try one of these classes instead: 
 * ez-oa
 * ez-dt 
 * ez-it
 * ez-tc
 * ez-ib
 */
 
.ez-oh {
	overflow: hidden;
	_overflow: visible;
}

.ez-oa {
	overflow: auto;
}
.ez-dt {
	display: table;
}

.ez-it {
	display: inline-table;
}
.ez-tc {
	display: table-cell;
}

.ez-ib {
	display: inline-block;
}

/* 
 * DIVs to be columns
 * we float them left or right depending on module or layout
 * the negative margin is used to fix a IE6 bug (3px jog).
 */
.ez-fl {
	_margin-right: -3px;
	float: left;
}

.ez-fr {
	_margin-left: -3px;
	float: right;
}

/*
 * every floated column in a module or layout needs a width
 * here we have 5 default values: 1/4, 1/3, 1/2, 2/3 and 3/4
 */

.ez-25 {width: 25%;}
.ez-33 {width: 33.33%;}
.ez-50 {width: 50%;}
.ez-66 {width: 66.66%;}
.ez-75 {width: 75%;}

/* 
 * the following classes are used to make columns that are siblings overlap by 1 pixel (to vertically align 1 pixel borders between containers)
 * for this to work, this class must be applied to the following elements: 
 * - column 1 of Module 2A, 
 * - column 2 of Module 3A,
 * - column 1 of Module 3B, 
 * - column 3 of Module 4A, 
 * - column 1 of Module 4B, 
 * - column 1 in column 1 of Module 4B, 
 * - column 2 in column 1 of Module 4B 
 */
 
.ez-negmr {
	margin-right: -1px;
	_margin-right:-4px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 3A,
 * - column 1 of Module 4A,
 * - column 2 of Module 4A 
 */
 
.ez-negmx {
	margin-right: -1px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 2B,
 * - column 2 of Module 3B 
 */
 
.ez-negml {
	margin-left: -1px; 
	_margin-left:-4px;
}

Production (minified - 774 bytes)

ez-plug-filters-min.css

ez-proto.css

Uncompressed (1.086 kb)

ez-proto.css

/* 2009 - 2010 (c) | ez-css.org
 * ez-proto.css :: version 1.1 :: 03132010
 *
 * For rapid prototyping. 
 * With this style sheet, use the snippets from http://www.ez-css.org/rapid_prototyping 
 */

/* 
 * This wrapper, first child of body, is used to wrap "ez-css" modules. 
 * It will auto-center if it is given a width smaller than the width of the viewport.
 * Position relative is used to create a stacking context from the start (to prevent z-index issues). 
 * overflow:hidden is used to create a block formatting context, but if you give this element a width you can replace this declaration with display:inline-block
 */

.ez-mw {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	position :relative;
	z-index: 1;
	overflow: hidden;
}

/*
 * to make sure modules clear previous containers
 */

.ez-wr {clear: left;}

.ez-wr:after,
.ez-box:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}

/*
 * column floated left 
 */

.ez-fl {
	float: left;
}

/* 
 * column floated right 
 */

.ez-fr {
	float: right;
}

/*
 * 5 default widths for 1/4, 1/3, 1/2, 2/3 and 3/4 columns
 */

.ez-25 {width:25%;}
.ez-33 {width:33.33%;}
.ez-50 {width:50%;}
.ez-66 {width:66.66%;}
.ez-75 {width:75%;}

Minified (0.413 kb)

ez-proto-min.css

“Downloads”

Available files:

For the code snippets from the layouts page.

For the code snippets from the prototyping page.

ez.css

Development (uncompressed - 3.401 kb)

Production (minified - - 1.012 kb)

ez-filters.css

Development (uncompressed - 3.233 kb)

Production (minified - 915 bytes)

ez-plug.css

Development (uncompressed - 2.735 kb)

Production (minified - 857 bytes)

ez-plug-filters.css

Development (uncompressed - 2.661 kb)

Production (minified - 774 bytes)

ez-proto.css

Uncompressed (1.086 kb)

Minified (0.413 kb)

Build whatever!

CSS places to visit

TJK Design's Articles