Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 13.12.2011, 12:45
webwurm webwurm ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2011
Beiträge: 4
webwurm befindet sich auf einem aufstrebenden Ast
Frage DIVs überlappen sich nicht

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
Mit Zitat antworten
Sponsored Links