sandy: innerhalb einer box frei positionieren...

Beitrag lesen

hallo zusammen,

ich möchte gerne innerhalb der blauen box die gelbe box belibig pixelgenau positionieren. wichtig dabei ist, daß ich die abstände der gelbenbox realtiv zur roten angeben muss.
ich bekomme das aber einfach nicht hin.
code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>test</title>
</head>
<style>
#container
 {
  width: 400px;
  height: 400px;
  border: 1px;
  margin : 0 0 0 0;
  padding : 0 0 0 0;
  background: blue;
 }

#left {
 float: left;
 width: 20px;
 height: 400px;
 background: red;
}

#right {
 float: right;
 width: 20px;
 height: 400px;
 background: silver;
}

#gelb {
 width: 50px;
 height: 50px;
        left: 10px; /*abstand von roter box! */
        top: 20px; /*abstand vom begin der blauen box */
 background: yellow;
}

</style>
<body>
<div id="container">
 <div id="left">left</div>
        <div id="gelb">1</div>
 <div id="right">right</div>
</div>
<br><br>

</body>
</html>