Variable width "columns"

First, it's important to realize that the idea of columns has not really been adopted in CSS. There's plenty of reasons for this, not the least of which being that they're not usually what people want. Nevertheless, we can "mimic" some features of columns using other CSS properties. Frequently, peopel ask, "how can I create two variable width columns?" There's lots of problems from a design point of view, but here's a simple fix.

The idea is simple: (1)floated elements only consume the necessary amount of space, by default. (2)Subsequent inline element will flow next to the floated elements. The following code is used by all the following examples:

/* create the "dyanmic" width left "column" */
.left {
	float: left;
	background-color: #789;
}
/* create a container to illustrate this */
.container {
	margin-top: 1em;
	background-color: #d1d1d1;
}

/* the following are two selectors are a simple
	"contain float" solution */
.container:after {
	display: block; content: "."; height: 0; overflow: hidden; clear: both;
}
* html .container { height: 1em; }