The concept is the same, but markup and CSS rules differ.
The CSS file to “pair” with the code snippets below is
ez-proto.css. You can check our demo page to see all these modules and layouts “live”.
This solution is a hack as it relies on
fieldset to escape caveats related to DIVs. It should not be used for production.
- Plain Box
- Module 2A
- Module 2B
- Module 3A
- Module 3B
- Module 4A
- Module 4B
- Layout 1
- Layout 2
- Layout 3
What's the deal with the numbers?
The numbers in the modules and layouts above show the source order (the HTML flow). Blue numbers correspond to columns for which a width needs to be set (which are all columns in a module but the last one in the flow).
Default widths are already set via classes.