Putting all portlets in a single column prevents most of the styling issues but, as seen in the screen snapshot, once multiple columns are enabled, the layout and styling makes the portlets nearly impossible to use.

Are there any CSS style class naming specifications for portlet applications? I ask this because the main issue (examples having more width than they should) can simply be fixed by changing a style class name in our component showcase facelets. In main-template.xhtml we only need to change the 'container' class name to something else, like 'ice-container' (and of course change the name in the CSS file as well). It seems that Liferay 6.2 is using a class named 'container' as well for their UI, which happens to be the same name we're using. So, if there's no requirement to name CSS style classes in a certain way we can simply change this class name.

The Portlet specifications (http://download.oracle.com/otn-pub/jcp/portlet-2.0-edr-oth-JSpec/portlet-2_0-edr.pdf) do outline a few CSS style naming guidelines but they are fairly basic and all names start with "portlet-" so in this case, container should be find to change.

Committed fix to 4.0 trunk at revision 41223 and to 3.3 EE maintenance branch at revision 41222. Renamed 'container' CSS class name to 'ice-container' in the portlet showcase, in order to avoid conflicts with Liferay 6.2.

Confirm that this looks much better now and that portlets are usable in multicolumn layouts.