jords: CSS 3Spalten werden nicht nacheinander dargestellt.

Beitrag lesen

SELF-Forum

CSS 3Spalten werden nicht nacheinander dargestellt.

jords
– Informationen zu den Bewertungsregeln

Versuch gerade in CSS ne Vorlage für Typo3 zu zaubern.

Poste mal den Quellcode, damit man es leicher nachvollziehen kann.

Habe mehrere Container definiert.
In Container 3 habe ich dann div. Bereiche angelegt.
Jeweils mit verschiedenen Farben. Damit man es besser erkennen kann, was wo ist.
Das Blöde ist das iim div Inhalt nicht die 3 Spalten nacheinander dargestellt werden (div links, mitte, rechts). Eine gliedert sich kurzerhalb außerhalb des Containers ein..

<html>  
  <head>  
    <title>Kothes</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
    <meta http-equiv="language" content="de" />  
    <link rel="stylesheet" type="text/css" href="style.css" />  
  
  </head>  
  <body>  
	<div id="container">  
		<div id="container2">  
			<div id="container3">  
				<div id="logo">  
  
				</div>  
				<div id="menueSuche">  
  
				</div>  
				<div id="banner">  
  
				</div>  
				<div id="inhalt">  
					<div id="links">  
					  
					</div>  
					<div id="mitte">  
  
					</div>  
					<div id="rechts">  
  
					</div>  
				</div>  
				<div id="footer">  
  
				</div>  
			</div>  
		</div>  
  
	</div>  
  </body>  
</html>  


body{  
	text-align:center;  
}  
div#container{  
  
	background-color: #eeeeee;  
}  
  
div#container2{  
	width: 1000px;  
	height: 850px;  
	background-color: white;  
	margin:0px auto;  
}  
div#container3{  
	width:950px;  
	height: 100%;  
	background-color: yellow;  
	margin: 0px auto;  
	border: 1px solid black;  
}  
div#logo{  
	width: 950px;  
	height: 50px;  
	background-color: black;  
}  
div#menueSuche{  
	float: left;  
	width: 950px;  
	height: 40px;  
	background-color: gray;  
}  
div#banner{  
	float: left;  
	width: 950px;  
	height: 80px;  
	background-color: red;  
}  
div#inhalt{  
	float: left;  
	width: 950px;  
	height: 650px;  
	background-color: green;	  
}  
div#links{  
	float:left;  
	width: 200px;  
	height: 650px;  
	background-color: gray;  
}  
div#rechts{  
	width: 20px;  
	height: 650px;  
	margin-left:850px;  
	background-color: gray;  
}  
div#mitte{  
	 margin: 0 12em 0 16em;  
    	 padding: 0 1em;  
}  
div#footer{  
	float: left;  
	width: 950px;  
	height: 30px;  
	background-color: blue;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln