Probleme beim Layout

[Stephan Liebig]

Hallo,

ich habe wieder ein paar Probleme mit CSS. Und zwar möchte ich das wie im Bild (siehe Anhang) dargestelle Layout mit CSS erzeugen, allerdings klappt das mit der Höhe irgendwie nicht so ganz.

Der container hat zwar die Höhe 100%, aber wenn ich den darinlegenden Divs content und rightbar auch auf 100% stelle, so dass sie - nach meinen Wünschen - den Rest des Divs container füllen, klappt das nicht.

Aufbau HTML

<div class="container">
	<div class="header">
    	<div class="imagelayer"></div>
        <div class="identifier"></div>
    </div>
    <div class="content"></div>
    <div class="rightbar"></div>
</div>

CSS

@charset "utf-8";

* {
	margin:					0;
	padding:				0;
}

body {
	background-color:		#eee;
}

.container {
	position:				absolute;
	min-height:				100%;
	height:					auto;
	left:					50%;
	margin-left:			-450px;
	width:					900px;
	background-color:		#FFF;
}

.header {
	position:				absolute;
	height:					200px;
	width:					100%;
}

.imagelayer {
	position:				absolute;
	height:					100%;
	width:					100%;
}

.identifier {
	position:				absolute;
	height:					100%;
	width:					100%;
	z-index:				2;
}

.content {
	position:				absolute;
	top:					200px;
	height:					100%;
	width:					600px;
}

.rightbar {
	position:				relative;
	top:					200px;
	float:					right;
	height:					100%;
	background-color:#CCC;
	width:					300px;
}

 

[Maik]

Hi,

schau dir hierfür mein CSS-Tutorial CSS-Layout mit 100%-Höhe an, in dem die Spaltenhintergründe im übergeordneten DIV-Block #wrapper (bei dir .container) mit Hilfe eines Hintergrundbildes erzeugt werden.

Denn nur dieser Block nimmt im Viewport eine tatsächliche Mindesthöhe von 100% ein.

mfg Maik

 

[Stephan Liebig]

Ich habe es mir noch nicht angeschaut, werde ich aber gleich. Das nur als info vorab
Mein Problem ist ja nicht, dass die beiden Divs zu klein sind, sondern zu groß. Sie sind größer als die Höhe vom container.

edit
Aber ich sehe, da steht auch etwas zu meiner Sache

 

[Maik]

Jo, denn ihre 100%-Höhe bezieht sich auf die Fensterhöhe, und um das Höhenmaß des Headerbereichs ist die inhaltsleere Seite im Fenster scrollbar

mfg Maik

 

[Stephan Liebig]

Aber sollte sich der DIV container der Höhe nicht anpassen?

 

[Maik]

Du meinst, dass er in deinem Fall selbständig die Höhe des Headers von seiner eigenen Höhe subtrahiert?

Keine Chance - so wird das nichts ;-)

Denselben Problemfall hatten wir übrigens erst kürzlich wieder: Divs doppelt so lang!

mfg Maik

 

[Stephan Liebig]

So also ich habe das Problem mit der 100% Höhe nun im Griff. Allerdings habe ich nun ein anderes Prob.

Wenn der Inhalt im Div rightbar länger wird, ändert sich die Höhe vom container nicht

@charset "utf-8";

* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
	margin: 				0;
	padding: 				0;
	font-family:			Verdana, Geneva, sans-serif;
}

body {
	background-color:		#eee;
	text-align: 			center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
	text-align: 			left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
	height:					100%;
}

/* DIV-Boxen */

div#container {
	position:				relative;
	margin: 				0 auto;
	width: 					900px;
	min-height: 			100%;
	height: 				auto !important;
	border-left: 			1px solid #b51843;
	border-right: 			1px solid #b51843;
	background-image:		url('./images/background.png');
	background-repeat:		repeat-y;
}

div#header {
	position:				absolute;
	height: 				200px;
}

div#logo {
	position:				absolute;
	height: 				200px;
	z-index:				3;
}

div#topNavi {
	position:				absolute;
	top:					200px;
	height: 				25px;
	width:					100%;	
	background-color:		#a6abb5;
	border-top: 			1px solid #b8b8b8;
	border-bottom: 			1px solid #b8b8b8;
	text-align:				center;
}

#topNavi ul {
	margin-top:				3px;
}

#topNavi ul li {
	list-style:				none;
	list-style-position:	inside;
	display:				inline;
	padding-right:			30px;
}

div#rightbar {
	padding-top:			240px;
	height:					auto;
	width: 					290px;
	float:					right;
}

div#content {
	padding-top:			240px;
	padding-left:			10px;
	padding-right:			10px;
	padding-bottom:			10px;
	margin-right:			300px;
	height:					auto;
}

div#rightCol, div#centerCol {
	padding-bottom:			25px;
}

div#footer {
	clear:					both;
	position:				absolute;
	bottom: 				0;
	width: 					100%;
	height: 				20px;
	background: 			#b51843;
	border-top: 			1px solid #b51843;
	color: 					#FFF;
	font-size:				0.7em;
	text-align:				center;
	vertical-align:			middle;
}


/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
	content: 				".";
	display: 				block;
	height: 				0;
	clear: 					both;
	visibility: 			hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div id="container">
	<div id="header"></div>
    <div id="logo"></div>
	<div id="topNavi"></div>
	<div id="rightbar"></div>
	<div id="content"></div>
	<div id="footer"></div>
</div>

 

[Maik]

Webmaster FAQ -> CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Demnach fehlt im DIV-Block #container der Aufruf der im Stylesheet enthaltenen Klasse .clearfix:

<div id="container" class="clearfix">

Achja, nutze besser den "font-size:0"-Fix meines Tutorials (siehe hierzu meinen "Nachtrag - 20.12.2008"), damit's bei überlangem Inhalt kein weiteres Problem gibt ;-)

mfg Maik