floating stacked variable height div containers in a 2 column layout

Hi Guys, please help:
I have a basic layout using div tags with CSS. There's a header, a footer, with a left and right column in between. The left and right columns each have 3 stacked divs that should stay together, even if the height of the div tags change...

I'm having difficulty with the floating and clearing options to maintain the structure.

Here's the code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Floating Problem</title>
<style type="text/css">
#body {
	background-color: #CCC;
}
#wrapper {
	background-color: #999;
	width: 800px;

Syndicate content