Controlling layouts with CSS is a big subject these days as after dropping the table support, it is clear that the current capabilities of CSS is not enough to develop complex & flexible layouts with ease.

There is CSS Template Layout Module which offers exciting features but it is in a draft status.

Until we get those new features, there are various solutions that are developed with jQuery to manipulate page layouts for faster & cross-browser results.

Here is a collection of 6 jQuery plugins to manage page layouts easily:

jQuery Masonry

Masonry is like the flip side of CSS floats. Floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. And the result is no vertical gaps between elements of varying height.

The plugin is almost totally managed with CSS rules. It uses jQuery’s outerWidth() and innerWidth() methods to calculate the margins & paddings of elements.

UI.Layout

This is a plugin to create desktop-like layouts. It can b used to create any UI look from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms & more.

jLayout

The library provides three layout algorithms:

• border, which lays out components in five different regions
• grid, which lays out components in a user defined grid
• flex-grid which offers a grid with flexible column and row sizes.

css-template-layout

The plugin aims to offer a similar functionality with the CSS Template Layout Module (which is currently in a draft status).

The script simply parses the mentioned CSS rules & displays the content accordingly.

Columnizer

The plugin automatically converts any content into a newspaper-like column format.

A default clumn widt or a static number of columns can be defined & the rest is almost done by itself.

EqualHeights

Creating equal height boxes or content holders is mostly a challenge with CSS. The plugin makes this process easy by simply calling a function.

Compass is a stylesheet framework (and not only a collection of classes) for Ruby.

Using Compass, you can still use the other css frameworks -blueprint, yui, 960- that are ported to Sass and they are ready to be used in your ruby-based web application or stand-alone via a simple command-line interface.

The framework comes with a detailed documentation on:

• supported frameworks
  
• best practices
• patterns & more..

You can also watch the podcast on how Compass works.

Grid System Generator is a website that asks for grid width, number of columns, margin-left/right & creates a fixed grid system with valid xhtml/css.

Besides the CSS framework, a .PNG background file is created as well to help in prototyping and design.

The generator is based on 960.gs & displays already created grids which can be found here.

You can also find instructions on using the generator & links to resources about grid systems.

P.S. Another 960.gs based grid generator can be found here.

IE6 CSS Fixer is a free web-based tool to decrease the monkey work when starting an IE6 CSS fix file.

It is not a magical one-click solution that will solve every possible problem, it can even create new errors, but it is a handy solution that offers customized fixes for commonly known problems.

The tool simply checks your CSS file & creates new CSS rules for the possible problematic objects. New rules can be inserted as a seperate CSS file easily to check if they cause any problems.

Some CSS fixes it offers are:

• adding display:inline to floated elements
• converting min-height values
• fixing negative margins & more.

Styleneat is a free web service that helps having "easy to read/update" CSS files.

It organizes and standardizes CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas and see how they relate to each other.

The service can be used in 3 ways:

• by pasting the CSS text
• by uploading the CSS file
• by providing the URL of the CSS file

It offers several options like "sorting properties and selectors alphabetically" or "single/multiple line formatting".

Filament Group is sharing a method of "creating CSS tooltip pointers with no images" that we’ll probably see in the upcoming jQuery UI widgets.

It uses Polygonal CSS, a trick to display non rectangular shapes, for creating the tooltip pointer (a triangle).

Although the method looks experimental, it is cross-browser & provides ease for creating flexible solutions by not requiring an image.

The website explains how it is achieved in detail & the solution will probably become more popular once we see them in the jQuery UI widgets.

Vladimir Carrer, who also created the Emastic & Malo CSS frameworks has a fresh framework named Golden Grid.

It is a web grid system, that is totally focused on grid-based designs (not a complete CSS framework).

Golden Grid uses float:left approach for building grids rather than positions.

It is a 6/12 column grid system with a 970px main width. Total file size is <1kb when compressed.

To read more about it, you can check his blog post announcing the framework.

Flash, Silverlight & JavaScript are already offering quality solutions for creating graphs. On the other hand, it is impressive to see what an be done in visualising data with CSS.

After the pure CSS data chart, Css Globe is presenting a very creative tutorial (with source codes) on creating a pure CSS line graph.

The solution creates a vertical/horizontal grid with dd & dl elements in the background. And, a smartly prepared image is used with CSS sprites technique to display the lines.

Although it looks complicated, the technique is simple yet clever & inspiring.

Veerle’s blog is presenting a tutorial, with source codes, on creating a simple & scalable css-based breadcrumbs.

What are breadcumbs?

From Wikipedia: Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents.

Only 1 image is used for creating this navigation which is the seperator. It is a bigger image than the displayed one considering the breadcrumb will be scaled when needed.

A handy resource on a method that is used in almost every web application. To see the demo, click here.

EmChart is a handy resource when designing with "em"s & need to convert px values to em values.

By checking the "desired pixel size" /  "current pixel size", it is possible to reach the em value. And, rather than calculating this every time, EmChart makes this process easier.

The chart can be reached online or downloaded & used offline.