[CSS] Simulating Gmail

programming web dev
1

I want to simulate Gmail’s CSS:

[LIST]
[]people list always on the left
[]date/time always on the right
[*]Message preview is as long as the user’s browser. It will shrink when the browser shrinks.
[/LIST]

So I attempted to do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

	.email {
		background: #99CCFF;
		height: 1.2em;
	}
	
	.date {
		background: #FFFFCC;
		float: right;
	}
	
	.people {
		background: #99CCCC;
		float: left;
	}
	
	.message {
		background: #FFCCFF;
		float: left;
	}
	
</style>
</head>

<body>

	<div class="email">
		<div class="people">
			John, Rob, Jennifer
		</div>
		<div class="message">
			This message is supposed to shrink with the browser.
		</div>
		<div class="date">
			4:15 pm 12/05/07
		</div>
	</div>

</body>
</html>

When the browser is wide enough, it looks ok:

But it fails when the browser is shrunk:

Any ideas?