FAQ

These are the questions we have answers for :)

Is the holy grail?
No it's not, and as far as I know there is no such thing.
For example, does not create same height columns nor let you vertically center content. If you are looking for that kind of solution then check float-less CSS layouts (which, btw, is not the holy grail either).
How does work?
The whole idea behind this solution is to force the final “columns” in the flow to become a block formatting context (and giving them a layout for IE lt 8). Doing so creates a fluid container that is both aware of surrounding floats and will contain a float at the same time. Actually, each container is a block formatting context, the difference being that the final column is width-less. This lack of width prevents rounding issues (e.g., 1/3, 1/3, 1/3) or rounding errors (e.g. 1/2, 1/2 in Internet Explorer lt 7). As a bonus, vertical margins should behave the same in all containers (it will not collapse at the top or bottom of the box).
The solution for fast prototyping uses fieldset, are you serious?
A fieldset creates a new block formatting context and has a layout, two features that DIVs don't have. Hence, even without styling, fieldsets contain floats and are aware of surrounding floats. This is a great tool to build live mockups, but because of semantic considerations it should not be used for production.
I am using ez-proto.css and I notice that one of the columns is not styled properly, how can I fix this?
The style sheet for this solution styles an HTML element (fieldset), so it is possible that this element is also styled (or its default styling is not reset) by a rule coming from another style sheet. Check your “base” style sheet or “reset.css” file to see if they do not style (or unstyle) the fieldset element somehow.
What is the best way to cut and paste the code snippets?
Please check Tips and Tricks to find the answer to that question.
I am using margin to create some space between columns and it does not work. How come?
Please check Tips and Tricks to find the answer to that question.
I am trying to position an element outside of the width-less container and I can only make it work in Internet Explorer (lt 8). What can I do?
This issue is related to the way creates block formatting contexts because by default we rely on overflow:hidden. There are other classes in the style sheet that can be used as triggers, to allow you to position elements outside of the ez-last container. Note that these classes (ez-oa, ez-dt, ez-it, ez-tc, ez-ib) may create a shrink-to-fit effect and make your column look narrower than you'd want to. In any case, if everything else fails you can always style this element the “classic way”: give it a width and float it.
Note that ez-proto does not suffer from this limitation.
Does create same height containers?
It does not, but the style sheet will make the borders of siblings overlap, which allows the border to extend from top to bottom between boxes regardless of height (as it is done on this site).
Does work in all browsers?
works well across browsers, including IE 5.
Do I need to keep all ez-box DIVs in there?
Please check Tips and Tricks to find the answer to that question.
I am having some printing issues in old browsers, what should I do?
overflow:hidden may create printing issues in some browsers. If this is the case with your layout, then use a print style sheet to style the offending container with overflow:visible.
I see in the code for the modules that there are classes used to overlap borders between columns, but I do not need a border between my columns. So can I get rid of ez-negmr, ez-negmx, ez-negmr?
Yes, you can. These classes are only used to create a “shared border” like on this site where the border between the two columns will always be as tall as the tallest column.
Can modules and layouts be inserted anywhere?
Please check Tips and Tricks to find the answer to that question.
Can I use with my existing CMS?
ez-plug-min.css only weighs 857 bytes and does not style HTML elements so there is no penalty to including its rules into your existing documents.
What is the difference between ez.css, ez-plug.css, ez-proto.css, etc.?

There are three different basic style sheets:

  • ez.css: this style sheet is to be used with the code snippets found on the layouts page. You should use this style sheet if you start a project from scratch and if you care about CSS validation. With ez.css your layout will be automatically centered in all browsers (including IE5).
  • ez-plug.css: this style sheet does not style HTM elements, so you can safely insert it in any document (based on a CSS framework or not). It is to be used with the code snippets found on the layouts page. As with ez.css, this style sheet will validate.
  • ez-proto.css: this style sheet does the same as ez-proto.css, but it relies on fieldset. It is to be used with the code snippets found on the Prototyping page. As with ez.css, this style sheet will validate.

There are also other versions of these files (ez-filters.css, ez-min.css, etc.). The ones containing the word “filters” rely on the underscore property hack to cater for IE lt 7, hence these files are smaller, but they will not validate. The ones containing the word “min” are minified versions to be used for production.

I notice that in the minified version of ez-filters.css there are still semi-colons (“;”). Can I remove them to shave a couple of bytes?
Not really. These “;” are left in there to prevent a Safari 2.0 parsing bug.
One of my columns drops in Internet Explorer 5 and 6. How do I fix this?
Internet Explorer prior to version 7 treats width as min-width, so these browsers may increase the width of a container due to its content, thereby creating a “drop float”. This issue is not specific to though; it is most often related to a large table, a long string (i.e., URL), etc. Two common solutions to fix this problem is to use overflow:hidden (if you're dealing with a large element) or word-wrap:break-word if the issue is related to a long string. Note that the latter does not validate, so use a Conditional Comment if CSS validation is important to you.
What do the class names stand for? What do they do?
ez-mw
Sets auto margin to center the container if it is given a width. It also left aligns the text (to override a declaration from body). It sets a z-index to create a stacking context for the whole wrapper (to prevent stacking issues between siblings and nested containers).
ez-wr
It clears previous left floats. It has a layout (IE lt 8) and will contain floats via the clearfix method.
ez-last
It is the last element in the flow (most often the last column). It has a layout, so it will contain floats in IE lt 8, but not in other browsers.
ez-box
It has a layout (IE lt 8) and will contain floats via the clearfix method.
ez-fl
To float a container to the left
ez-fr
To float a container to the right
ez-oh
To set overflow:hidden (new block formatting context trigger)
ez-oa
To set overflow:auto (new block formatting context trigger)
ez-dt
To set display:table (new block formatting context trigger)
ez-it
To set display:inline-table (new block formatting context trigger)
ez-tc
To set display:table-cell (new block formatting context trigger)
ez-ib
To set display:inline-block (new block formatting context trigger)
ez-negmr
To set a negative margin (right) that will allow borders of siblings to overlap
ez-negml
To set a negative margin (left) that will allow borders of siblings to overlap
ez-negmx
To set a negative margin (right) that will allow borders of siblings to overlap (same value across browsers)
ez-25
Sets a width of 25%
ez-33
Sets a width of 33%
ez-50
Sets a width of 50%
ez-66
Sets a width of 66%
ez-75
Sets a width of 75%