Hallo zusammen

Ich bin am verzweifeln ...:sad:
Im Moment versuche ich zwei Layers so darzustellen, dass diese nicht überlappen. Ein Layer ist alelrdings unten ausgerichtet (bottom) und ändert sich mit dem ziehen des Browsers. Diese sollte aber beim anderen Layer stoppen, wenn er da zusammen kommt.
Das macht er leider nicht ...

Kann mir da jemand helfen?
Danke

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	  "http://www.w3.org/TR/html4/loose.dtd">
<html> 
	<head> 
		<title>Dokumenttitel</title> 
		<style type="text/css">
			div.content {
			position: absolute;
			width: 200px;
			float: left;
			border: 1px solid #000;
			}
			div.content2 {
			position: absolute;
			width: 200px;
			margin-top: 10px;
			bottom: 50px;
			left: 10px;
			float: left;
			border: 1px solid #000;
            }
		</style>  
	</head> 
	<body>  
		<div class="content">x</div> 
		<div class="content2">x</div>
	</body> 
</html>