[Shatyriel]

Ich möchte es bei einem Design so einrichten, dass Content+Header von einem dunklen Rahmen umfasst werden. Wenn ich die Container Floate verschwindet im FF2 einfach der dunkle Rahmen, bzw. er wird nur angezeigt, bis die "Float" Container kommen. Was ist das los?

Im IE7 geht es doch!!!

ich habe jetzt irgendwo so ne ganz dumme Möglichkeit gefunden. So find ich das aber blöd. Ich will, dass alles an seiner Stelle ist. Kann mir jemand helfen? Danke!

Weitere Probleme hinterfrage ich ev. später. Die Inhalte musste ich leider entfernen, da es sich um ein "geheimes" projekt handelt. *mission imposible musik abspiel*

p.s.: es geht um den Bereich sideMenu/Content

<div id="layout">

<div class="sideMenu">
				
					<h1>secret</h1>
					<ul>
						<li><a href=""><img src="" />secret</a></li>
					</ul>
					
				</div>



	
		<div id="headContainer">
		
			<div class="background">
					<div class="footsteps">
						<img src="" alt="" />
						<h1>Bliblablub</h1>
							<p><a href="">bli</a> &raquo; <a href="bla">bla</a> &raquo; <a href="">blub</a></p>
					</div>
					<div class="headMenu">
						<ul>
							<li><a href="blub">blub</a></li>
						</ul>
					</div>
			</div>
		</div>
		
		
		<div id="mainContainer">
			<div class="background">
				<div id="logo"></div>
					<div class="mainMenu">
						<ul>
							<li><a href=""><img src="" alt="" />blub</a></li>
						</ul>
					</div>
			</div>
		</div>
		
		<div id="contentContainer">
			<div class="background">
				
				<div class="content">
				
				
				<div class="container">
	Inhalt
				</div>
				
			</div>
		</div>
		
	
<div id="footer">

	<div class="background">
	
    	<div class="validation"> 
      		<ul>
        		<li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 strict">XHTML 
          		1.0 strict</a></li>
        		<li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS 2">CSS 
          		2</a></li>
        		<li><a href="http://start.mozilla.org/firefox/?de-DE" title="Use modern Browsers!">Mozilla 
          		Firefox 2</a></li>
      		</ul>
    	</div>
	
   		<div class="copyright">
			<ul>
				<li><a href="">Blub</a></li>
			</ul>
		</div>
		
	</div>
	
</div>

</div>

html, body { background: #858585; font-family: 'Trebuchet MS', Verdana, Sans-Seri; }
img { border: 0; vertical-align: middle; }
a { color: #000000; }
a:hover { color: #c0c0c0; text-decoration: none; }

#layout { text-align: left; margin: 0 auto; width: 800px; }

	#headContainer {
		background: #ffffff;
		border: 1px solid #626262;
		margin-bottom: 20px;
		width: 100%; }
			
		#headContainer .background { background: #F2F2F2; border: 1px solid #ffffff; height: 42px; width: 798px; }
					

		.footsteps { color: #565656; float: left; width: 50%; }
		.footsteps img { float: left; padding: 5px; }

			.footsteps h1 {
				font-size: 14px;
				font-weight: normal;
				margin: 0;
				padding: 5px 0 0 0; }

				.footsteps p { font-size: 10px; margin: 0; }

					.footsteps a { color: #E0923D; text-decoration: none; }
						.footsteps a:hover { color: #F8BB3F; }
							
		
		.headMenu { float: right; font-size: 12px; margin: 0; }

			.headMenu ul li { display: inline; float: left; list-style-type: none; }

				.headMenu ul li a {
					background: #F2F2F2;
					border-left: 1px solid #ffffff;
					color: #E0923D;
					padding: 12px;
					text-decoration: none; }
									
						.headMenu ul li a:hover {
							background: #ffffff;
							border-left: 1px solid #ffffff; }
										
	
	#mainContainer { border-top: 1px solid #626262; border-left: 1px solid #626262; border-right: 1px solid #626262;  width: 100%; }
		#mainContainer .background { background: #F2F2F2; border: 1px solid #ffffff; border-bottom: 0px; width: 798px; }
		
	#logo {
		background: url('../images/logo.png') #858585 no-repeat top left;
		border-bottom: 1px solid #FFFFFF;
		height: 100px;
		width: 100%; }
		
		.mainMenu { font-size: 10px; width: 100%; height: 29px;  }
			.mainMenu ul li { display: inline; float: right; list-style-type: none; }
				.mainMenu ul li a {
					background: #f2f2f2;
					border-left: 1px solid #FFFFFF;
					color: #666666;
					padding: 12px;
					text-decoration: none; }
					
					.mainMenu ul li a:hover { background: #ffffff; color: #666666; }
						.mainMenu ul li img { padding-right: 5px; }
						
	
	#contentContainer {
		border-left: 1px solid #626262;
		border-right: 1px solid #626262;
		border-bottom: 1px solid #626262;
		margin-top: 0px;
		width: 100%; }
		
		#contentContainer .background { background: #ffffff; border: 1px solid #ffffff; width: 798px; }
			.sideMenu {
				background: #DFDFDF;
				font-size: 11px;
				width: 200px;
				position: absolute;
				top: 217px;
				left: 114px;
				clear: right; }
				
				.sideMenu h1 { color: #E0923D; font-size: 12px; font-weight: lighter; margin-left: 10px; }
				.sideMenu img { border: 0; padding-right: 5px; }
					.sideMenu ul li { list-style-type: none; }
						.sideMenu ul li a {
							color: #4E4E4E;
							border-bottom: 1px dotted #ffffff;
							display: block;
							padding: 5px 0px 5px 0px;
							text-decoration: none; }

				#menu ul li a:hover {
					color: #A7C2CF;
					border-bottom: 1px dotted #E6EAEC;
					background: #ffffff;
					text-decoration: none;
				}
				
				.content { background: #ffffff; width: 559px; min-height: 256px; padding-left: 205px; padding-top: 5px; }
		

		#footer { border: 1px solid #626262; clear: both; width: 100%; margin-top: 20px; }
			#footer .background { background: #F2F2F2; border: 1px solid #ffffff; height: 42px; width: 798px; }
					

			.validation { float: left; font-size: 12px; }

				.validation ul li { display: inline; float: left; list-style-type: none; }

					.validation ul li a {
						background: #F2F2F2;
						border-right: 1px solid #ffffff;
						color: #E0923D;
						padding: 12px;
						text-decoration: none; }
									
						.validation ul li a:hover {
							background: #ffffff;
							border-right: 1px solid #ffffff; }
							
			.copyright { float: right; font-size: 12px; }

				.copyright ul li { display: inline; float: left; list-style-type: none; }

					.copyright ul li a {
						background: #F2F2F2;
						border-left: 1px solid #ffffff;
						color: #E0923D;
						padding: 12px;
						text-decoration: none; }
									
						.copyright ul li a:hover {
							background: #ffffff;
							border-left: 1px solid #ffffff; }

[heiko_rs]

Siehe FAQ Punkt 2.

EDIT: Die FAQ befinden sich im CSS-Forum (oberster Thread)