Christian: Relative Position funktioniert nicht

Beitrag lesen

So, ausgehend der Resonanz auf mein gestriges Posting, versuche ich jetzt den Tabellen abzuschwören. Deshalb habe ich ein kleinen Testaufbau für ein Layout gemacht. Dabei verwende ich relative Positionsangaben für die Layer. Leider funktioniert das nicht so wie ich mir das gedacht habe. Ich hatte mir vorgestellt dass der TopRight- Layer, rechts neben dem Logolayer erscheinen sollte, dabei erscheint er darunter.

Hier der Code :

HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS - Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mainlayer">
 <div class="logoayer">logo</div>
 <div class="toprightlayer">modus</div>
</div>
</body>
</html>

CSS :

body {
 font-family: Arial, Helvetica, sans-serif;
 background-color: #092653;
 padding: 0px;
 margin: 0px;
}
.mainlayer {
 background-color: #FFFFFF;
 height: 200px;
 width: 750px;
 border: 1px solid #000000;

}
.logolayer {
 position: relative;
 left: 0px;
 top: 0px;
 height: 90px;
 width: 250px;
 border-bottom-width: 1px;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-width: 0px;
 border-right-width: 0px;
 border-left-width: 0px;
 text-align: center;

}
.toprightlayer {
 background-color: #FF0000;
 height: 90px;
 width: 400px;
 position: relative;
 top: 0px;
 right: 0px;
 border-top-width: 1px;
 border-right-width: 0px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
}