Tips and Tricks

These are best practices. You should follow these simple rules to create semantic documents that do not suffer from DIVitis.

The proper way to put the snippets of code together:
You should insert a module or a layout into another by replacing an ez-box DIV with a module or layout of your choice. Modules and layouts should not be direct children of ez-box containers (these should only be used to hold content). By the same token, and as seen in the screencast, an ez-wr DIV should not be the single child of another ez-wr DIV.
Do not keep ez-box containers if you don't need to:
If you do not need to style ez-box containers to achieve the design you want, then you can safely remove them from your markup and insert your content directly into the parent DIV. This is what we have done on this site, there are no ez-box DIVs in the left and right columns. Check the proper way to cut and paste modules and layouts to avoid DIVitis.
Do not use identifiers to style your documents:
To make sure you can insert new modules or layouts later into your documents, you should not use classes used by as selectors for your rules. The same goes with classes used to set default widths, you should not edit their value (replacing 50% in the .ez-w-50 {} rule with 600px for example). Instead, you should set your own hooks (class and id) on the appropriate elements.
When adding class and id, think of HTML5 and ARIA:
Why not use names inspired from the new semantic elements in HTML5? And what about including ARIA "Landmark" roles at the same time?
Do not use the solution for prototyping in production:
This solution may be "cool", but using fieldset as a structural hack goes against best practices.
Create a gutter between two columns by applying margin to the float:
The best way to create a gutter between columns is to apply margin on columns that are floats. If for some reason you need to style an ez-last box instead (a width-less column), then use padding rather than margin.
To prevent long strings breaking your layout in IE 6:
Because IE 6 treats width as min-width, content may increase the width of your columns. You can force strings (i.e., URIs) to break by using word-wrap:break-word.