Given the following markup, we might be told to have #main and #sidebar side by side and the #contact section appear in the sidebar but all the way down.

<div id="content">
	<div id="main">
		Body text
	</div>
	<div id="sidebar">
		<div id="nav">
			Navigation UL
		</div>
		<div id="contact">
			Contact info
		</div>
	</div>
</div>

First, for our #main and #sidebar divs to stand by side by side, we can simply float them:

#main {
	float: left;
	width: 62%;
}
#sidebar {
	float: right;
	width: 36%;
}

The trick is now to create a positioning context of #content div in which we can position #contact absolutely.

#content {
	position: relative;
}
#contact {
	position: absolute;
	bottom: 0;
	right: 0;
}

The problem, for now, is that being floated or absolutely positioned, #main and #sidebar don’t take up any space in #content, which is therefore as flat as can be. We’ll need to add something inside #content that will clear floats, either through CSS (using content) or in HTML (because IE doesn’t support generated content). Change your markup to:

<div id="content">
	<div id="main">
		Body text
	</div>
	<div id="sidebar">
		<div id="nav">
			Navigation UL
		</div>
		<div id="contact">
			Contact info
		</div>
	</div>
	<div class="clearall"></div>
</div>

This should work for most modern browsers, however IE’s CSS implementation is a mess and the floats used in this situation can trigger the peekaboo bug. To avoid this, giving hasLayout to #content solves the problem because it gives it the ability to properly hold its floats. Since this is only needed for IE, this declaration should be hidden using the Holly Hack:

* html #content {
	height: 1%;
}

Giving #content a height won’t hide its contents because IE will (incorrectly, according to the spec) expand it to fit whatever is inside.

That’s it! View source on the demo I set up for all the CSS that is needed. Tested and approved on Firefox, Opera and IE (5 to 7).

Update (July 9th, 2008)

In reply to Petr’s comment, I’ve added another demo where the sidebar items should not overlap. This is achieved by adding a margin-bottom to #sidebar that’s equal to the maximum height of the bottom item. Tested and rendering correctly in IE 5 to 7, Firefox