Problem mit CSS und Div-Layout

1989moni1989 · 23. März 2009

Hallo!
Ich will mein Layout mit Divs aufbauen, allerdings habe ich dabei ein Problem. Meine Startseite sieht vom Aufbau her so aus (ohne Inhalte).

HTML:

<body>

<div id='header'>
</div>

<div id='nav'>
</div>

<div id='wrapper'>
    <div id='content'>
    </div>

    <div id='right'>
    </div>
</div>

<div id='bottom'>
</div>

</body>

Der CSS Code ist folgender:

Code:

#header {
	margin-left:auto;
	margin-right:auto;
	width:700px;
	border:1px solid black;
}

#nav {
    margin-top:10px;
    margin-right:auto;
	margin-left:auto;
	width:850px;
	height:32px;
	background-image:url(images/top_bg.gif);
	background-repeat:repeat-x;
	border: 1px solid black;
}

#wrapper {
	width:850px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:5px;
	margin-bottom:5px;
	border: 1px solid black;
}

#content {
	width:650px;
	margin:4px;
	float:left;
	border: 1px solid black;
}

#right {
	width:180px;
	height:400px;
	margin:4px;
	float:left;
	border: 1px solid black;
}


#bottom {
    margin-left:auto;
	margin-right:auto;
	width:850px;
	text-align:center;
	border: 1px solid black;
}

Ich habe die einzelnen Divs schwarz umrahmt, damit man am folgenden Bild sieht was das Problem ist. Das div Wrapper hat keine Höhe, obwohl es eigentlich die zwei Divs in ihm umfassen sollte.
Der Bottom-Div ist dafür hoch, obwohl er das nicht sein sollte.
Weiß jemand die lösung von dem Problem? Der Wrapper soll die beiden DIVs umfassen, der bottom nicht.

http://www.bilder-space.de/show.php?file=23.03nUSXdwFKq2SDVwy.jpg

Mfg
Monika

Maik · 23. März 2009

Hi,

du hast es versäumt, die Floatumgebumg im DIV-Block #wrapper mittels der clear-Eigenschaft aufzuheben, weshalb er sie nicht in der vollen Höhe umschliesst.

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

HTML:

<div id='wrapper' class='clearfix'> ... </div>

CSS:

.clearfix:after {
content:".";
display:block;
height:0;
font-size: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 */

mfg Maik

Problem mit CSS und Div-Layout

1989moni1989

Mitglied

Maik

Neue Beiträge