Positionen der Div Bereiche

[coach02842]

hallo Jungs ,
ich habe ein Problem.
Ich habe eine Seite für meine E-Jugend erstellt.
Das Problem besteht aber darin,dass die einzelnen Divs überlappen ,wenn ich das Fenster minimiere oder bei anderen die Divs überlappen ,da die Anderen eine andere Auflösung haben ,als ich .
Ich hoffe ihr könnt mir helfen.
Hier ist der Link: SV Lintfort E1 Jugend

Hier könnt ihr mein Design in CSS sehen:

body {
background-image: url("http://www.kneller-gifs.de/backgrounds/g/bg_gras03.gif");
}


#überschrift {
width: 96%;
height: 50px;
border: 1px solid black;
background-image:url("http://www.superrudi.eu/Inhalt/Sammlung/Hintergr/Blau/Blau/b94.jpg");
position:absolute;
top: 10px;
left: 10px;
right: 10px;
color: white;
padding-right:0.5em;
font-family: “Tahoma”;
font-variant: small-caps;
font-weight: bold;
font-size:1cm;
text-align: center;


}

#steuerung {

font-family: 'Times New Roman', Verdana, Tahoma;
font-size: 14px;
letter-spacing: 3pt
}
#steuerung a:link, #steuerung a:active, #steuerung a:visited
{
display: block;
height: 20px;
width: 200px;
position:relative;
top: 65px;
right:38px;
border: 1px solid black;
margin: 2px;
padding: 3px 15px;
line-height: 22px;
text-decoration: none;
border-bottom: 1px solid #000;
background-image:url("http://www.superrudi.eu/Inhalt/Sammlung/Hintergr/Blau/Blau/b94.jpg");
color: #fff
}
#steuerung a:hover
{
text-decoration: none;
border-bottom: 1px dotted #000;
background-color: #fff;
text-align: right;
color: #fff
}
#steuerung a:link span, #steuerung a:visited span, #steuerung a:active span
{
visibility: hidden
}
#steuerung a:hover span
{
visibility: visible
}



#inhalt {
width: 50%;
border: 1px solid black;
background-image:url("http://www.superrudi.eu/Inhalt/Sammlung/Hintergr/Blau/Blau/b94.jpg");
position:absolute;
top:79px;
font-size:1.2em;
color: white;
text-align: left;
margin-left:15em;
margin-right:15em;

}



i
{
font-size:2em;

}


marquee {
font-size:2em;
}

.news {
font-size:0.5em;
}
#inhalt1 {
width: 50%;
border: 1px solid black;
background-image:url("http://www.superrudi.eu/Inhalt/Sammlung/Hintergr/Blau/Blau/b94.jpg");
position:absolute;
top:79px;
font-size:1.2em;
color: white;
text-align: center;
margin-left :15em;
margin-right:15em;

}


#counter {position:absolute;
top: 520px;
right: 100px;
}

.spiel{
font-size:1.2em;
text-align: center;
}


#box {
position:absolute;
top: 79px;
right: 100px;
}

#umfrage {
position:absolute;
top: 79px;
right: 100px;
}

 

[prm]

Verzichte auf sämtliche absoluten und relativen Positionierungen sowie ebenso auf die dazugehörigen top/left/right-Werte.
"Position: absolute" ist absolut unnötig, wenn man sich seiner Bedeutung nicht bewusst ist. Es sollte deshalb nur sehr gezielt eingesetzt werden.
Position: absolute Teil I

Positioniere die Elemente dagegen viel besser mit float und margin-Angaben.