I'm trying to build a window script. To start with I'm just trying to finalize the HTML needed for the window.

You'll find my attempt below.

The first one is before adding close and resize elements. It seems an ok starting point.

The 2nd one shows my attempt to add the close & resize elements. The difficulty is in making them line up with the right hand side of the window and making the top one not take up an extra line.

The problem is that I don't want to specify the size of the 'window' div because I want it to expand to fit the content. Because there is no width set any attempt to align right ends up aligning with the right hand side of the browser window.

Anyone got some ideas as to how I deal with this? Am I approaching it wrong?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>New Document</title>
		<style type="text/css">
			html, body
			{
				margin: 0px;
			}

			.window
			{
				background: gray;
				position: absolute;
				border: 1px solid black;
				top: 20px;
				left: 20px;
			}

			.ex2
			{
				left: 300px;
			}

			.topBar
			{
				position: relative;
				color: white;
				margin: 2px;
			}
			
			.ex2 .topBar
			{
				background: none;
			}

			.closeButton
			{
				width: 16px;
				height: 16px;
				background: red;
			}

			.window .content
			{
				width: 200px;
				height: 200px;
				background: white;
				overflow: auto;
			}

			.bottomBar
			{
				position: relative;
			}

			.ex2 .bottomBar
			{
				background: none;
			}

			.resizeHandle
			{
				background-color: green;
				height: 16px;
				width: 20px;
			}

		</style>
	</head>
	<body>
		<div class='window'>
			<div class='topBar'>
				Title
			</div>
			<div class='content'>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
			</div>
			<div class='bottomBar'>&nbsp;</div>
		</div>

		<div class='window ex2'>
			<div class='topBar'>
				Title <div class='closeButton'>&nbsp;</div>
			</div>
			<div class='content'>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
				Content goes here<br>
			</div>
			<div class='bottomBar'><div class='resizeHandle'>&nbsp;</div></div>
		</div>
	</body>
</html>