Hallo werte Foren-Mitglieder!
Ich weiß, die DIV-Überlappungs-Frage kommt mehrmals täglich - aber ich konnte trotz 2stündigen Googlen und Testen auf keinen grünen Zweig kommen. Vielleicht fehlt mir nur ein kleiner Hint, aber für den wäre ich Euch sehr dankbar.
Zur Erklärung meines Problems hab ich ein Bild angehängt. Das sollte aussagekräftig genug sein:
Mein HTML-Code bis jetzt:
HTML-Code:
...
<body>
<div id="wrapper">
<div id="top_left_top">
<div id="logo"></div>
<div id="top_menu_left">
[top_menu_left]</div>
</div>
<div id="top_right_top">
[top_right_top]
</div>
<div style="clear:both;"></div>
<div id="top_left_middle"></div>
<div id="top_right_middle">
<p>[top_right_middle] </p>
<p>sdfasdf</p>
<p>sdfasdf</p>
...
<p>asdad</p>
<p>sadfasdfdasfs</p>
</div>
<div id="middle_left">
<p>[middle_left] </p>
...
<p>sfasdfasf</p>
</div>
<div id="middle_right">[middle_right]</div>
</div>
</body>
...
Mein CSS-Code bis jetzt:
Code:
@charset "utf-8";
/* CSS Document */
html,body {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background-repeat: repeat-x;
background-color: #05274E;
overflow-x: scroll;
background-image: url(../used/main_page/background_01.png);
}
#wrapper {
width: 1100px;
margin-left: auto;
margin-right: auto;
display: block;
}
#top_left_top {
float: left;
height: 85px;
width: 790px;
}
#top_menu_left {
background-color: #B5C6E1;
float: right;
height: 40px;
width: 330px;
border: 10px solid #FFF;
margin-top: 15px;
text-align: center;
}
#logo {
float: left;
height: 71px;
padding-top: 14px;
width: 334px;
}
#top_right_top {
background-color: #FFF;
float: right;
height: 58px;
width: 298px;
margin-top: 15px;
margin-bottom: 10px;
border: 1px solid #05274E;
text-align: center;
}
#top_left_middle {
float: left;
height: 330px;
width: 790px;
background-color: #CCC;
}
#top_right_middle {
float: right;
width: 280px;
border: 10px solid #FFF;
background-color: #B5C6E1;
}
#middle_left {
background-color: #ECEFF2;
float: left;
width: 770px;
border: 10px solid #FFF;
margin-top: 10px;
z-index: 2;
}
#middle_right {
float: right;
width: 280px;
border: 10px solid #B5C6E1;
background-color: #FFF;
margin-top: 25px;
z-index: 5;
margin-right: 45px;
position: relative;
}
Ich wäre Euch für jede Hilfe sehr, sehr dankbar!
Lg,
Webwurm