✔ Divs richtig positionieren

[paraphan]

Hallo,
versuche gerade ein css-basierendes Layout zu entwickeln, habe allerdings noch meine Probleme...
Möchte gerne Elemente innerhalb eines Quadrates plazieren, siehe Bild:
-klick-

Irgendwie will das ganze aber nicht funktionieren, eigenlich möchte ich "Fahren mit Stil"(id="flasher") genau unter dem banner (id="banner") haben, aber wenn ich die korrekte Pixelanzahl eingebe, ist es viel zu weit unten...

Das Css-File sieht so aus:

body {
        text-align: center;
#container {
		position:relative;
        width: 790px;
		height: 590px;
        padding: 0px;
        margin-top: 130px;
        margin-bottom: 20px;
        margin-right: auto;
        margin-left: auto;
        background: white;
        border: 0px;
        text-align:left; 
  }
  
#banner {
 position:relative;
 top:50px;
 left:20px;
 }
 
#flasher {
 position:relative;
 top:200px;
 left:20px;
 }

Html-Code ist wie folgt für die Divs:

<div id="container">

<div id="banner">
<img src="header.jpg" width="746" height="122">
</div>
<div id="flasher">
<img src="flasher.jpg" width="396" height="86">
</div>

</div>

Kann mir hier jemand weiterhelfen und mir sagen woran die Verschiebung liegt?

 

[Ellie]

Moin,

versuch mal den flasher mit "margin-top=0;" zu positionieren, denn die Angabe verhält sich relativ zum vorhergegangenen div. Gibst Du top:200 ein, dann sind das 200px vom oberen Rand des Headers und nicht des oberen Containerrahmens.

LG,
Ellie

 

[paraphan]

danke für die antwort!
mit absoluter positionierung löst sich das ganze.