DIv passt sich nicht an Inhalt an

smisonline2 · 9. Juli 2013

Hallo,

der Bereich unten im Code mit der id = main umfasst verschiedene Elemente und ich habe ihn testweise mit Background-color= rot versehen. Aber er dehnt sich nicht mit den Elementen aus. Wenn ich die Höhe auf z.B. 100% setze, wird zumindestens ein Teil rot ausgefüllt und somit von der Höhe ausgedehnt. Was mache ich da falsch. Ist bestimmt was ganz simples, aber irgendwie komme ich nicht drauf.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Der Test</title>


<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
<link rel="stylesheet" href="css/mainnavi.css" type="text/css" />
<link rel="stylesheet" href="css/headernavi.css" type="text/css" />




<!--[if lt IE 9]>
	<script src="images/layerslider/assets/js/html5.js"></script>
<![endif]-->
</head>

<body>
	<div id="header">
		<div id="header_left">
			<a href="index.php"><img src="images/logo.png" /></a>		
		</div>
		<div id="header_right">
			<div id="headernavi">
				<ul>
					<li>
						<a href="#">Merkliste</a>
					</li>  
					<li> 
						<a href="#">Kontakt</a>
					</li>  
					<li>
						<a href="#">Impressum</a>
					</li> 
				</ul>
			</div>
		</div>
		<div id="clear"></div>
	</div>
	<div id="mainnavi">
		<ul>
			<li>
				<a class="active" href="#">Startseite</a>			</li>  
			<li> 
				<a href="#">Angebote</a>			</li>  
			<li>
				<a href="#">Suche</a>			</li> 
			<li>
				<a href="#">Verkäufer</a>			</li> 
			<li>
				<a href="#">Über uns</a>			</li> 
		</ul>
		<div id="servicenummer">Hotline: 0000 000 00 00 00</div>
	</div>
	<div id="teaser">
		Test einbauen
	</div>
	<div id="main">
		<div class="col_left_1 block">
			<h2>Herzlich Willkommen</h2>
			<p>asid ziad uqtwd qztd q dwzd uq</p>
			<p>
			  <label>test
			  <input type="text" name="textfield" />
			  </label>
			</p>
		</div>
		<div class="col_right_1">
			<h2>Angebote & Gesuche</h2>
			<div id="angebot_gesuch_tabs">
				Tab einfügen
			</div>
			<div class="clear"></div>	
			<h2>News</h2>
			<p>&quot;Test Test; bietet Ihnen ein umfassendes Angebot an Immobilien, Wohnungen und Grundstücken. Hier finden Sie aktuelle Informationen . </p>
			<div class="newsbox">
				<div class="newsbox_date">
					<br />
					<h2>01 Apr</h2>
				</div>
				<div class="newsbox_text">
					<h2>Homepage Relaunch</h2>
					ad audg uazgdazsd audatds ad zatfdzatd aztd aztdftazdf azdf zafdtzadf az
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
			<div class="newsbox">
				<div class="newsbox_date">
					<br />
					<h2>01 Apr</h2>
				</div>
				<div class="newsbox_text">
					<h2>Homepage Relaunch</h2>
					ad audg uazgdazsd audatds ad zatfdzatd aztd aztdftazdf azdf zafdtzadf az
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
			<div class="newsbox">
				<div class="newsbox_date">
					<br />
					<h2>01 Apr</h2>
				</div>
				<div class="newsbox_text">
					<h2>Homepage Relaunch</h2>
					ad audg uazgdazsd audatds ad zatfdzatd aztd aztdftazdf azdf zafdtzadf az
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
	<div id="footer">
		Der Test
	</div>
	<div id="clear"></div>
</body>
</html>

Hier die CSS definitionen

main.css

Code:

@charset "utf-8";

* {

	}

img {
	border: 0;
	}

html, body {
  	height: 100%;
	width: 100%;
	}
	
body {
	background-color: #ffffff;
	height: 100%;
	width: 100%;
	margin:0px;
	font-family: 'Terminal Dosis', Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555555;

    min-height: 100%; /*101%*/
	}
	
a {
	color: #555555;
	}


/* Elemente Format */

/* Blocksatz */
.block { 
	text-align:justify;
	}


.float-left {
	float:left;
	}

.float-right {
	float:right;
	}

/* Steuerelemente */
#clear {
	clear:both;
	}

layout.css

Code:

/* Layout */
	
#header {
	background-color:#ffffff;
	width:960px;
	margin: 0 auto;
	}
	
#header_left {
	float:left;
	display:block;
	}

#header_right {
	float:right;
	display:block;
	}

#teaser {
	width:960px;
	margin: 0 auto;
	}

#main {
	background-color:#ff8888;
	width:960px;
	margin: 0 auto;
	}
	
#footer {
	width:920px;
	margin: 0 auto;
	padding:20px;
	background-color:#bdc0c7;
	font-size: 12px;
	text-align:right;
	clear:both;
	}
	


/* servicenummer*/
#servicenummer {
	float:right;
	padding:10px 20px 10px 10px;
	}
	
	
	
	
	
/* Cols */
.col_left_1 {
	float:left;
	width:460px;
	padding-left:0px;
	}
	
.col_right_1 {
	float:right;
	width:440px;
	padding-right:0px;
	}
	
	
/* newsbox */
.newsbox {
	padding:0px;
	margin-bottom:20px;
	height:140px;
	width:440px;
	}
	
.newsbox_date {
	float:right;
	background-color:#474b51;
	color:#ffffff;
	font-weight:bold;
	width: 60px;
	height: 120px;
	text-align:center;
	padding:10px 20px;
	}

.newsbox_text {
	float:right;
	width:300px;
	height:120px;
	background-color:#dddddd;
	padding:10px 20px;
	}

headernavi.css nicht so wichtig für das beispiel

Code:

/* headernavi*/
#headernavi {
	padding:0px;
	margin:0px;
	margin-top:4px;
	margin-right:0px;
	float:left;
	}	

#headernavi ul li{
	float:left;
	list-style-type:none;
	}	

#headernavi ul li a{
	text-decoration:none;
	color: #555555;
	margin:0px;
	padding:0px 0px 0px 10px;
	display:block;
	}

mainnavi.css nicht so wictig für das Problem

Code:

/* mainnavi */

#mainnavi {
	background-color:#474b51;
	color:#ffffff;
	width:960px;
	margin: 0 auto;
	font-size:14px;
	}

#mainnavi ul {
	margin:0px;
	padding:0px;
	}

#mainnavi ul ul {
	display: none;
	}

	#mainnavi ul li:hover > ul {
		display: block;
		}
	
	
#mainnavi ul {
	background: #efefef; 
	padding: 0 0px;  
	list-style: none;
	position: relative;
	display: inline-table;
	}
	#mainnavi ul:after {
		content: ""; clear: both; display: block;
		}
	


#mainnavi ul li {
	float: left;
	}
	#mainnavi ul li:hover {
		background: #4b545f;
		}
		#mainnavi ul li:hover a {
			color: #fff;
			}

	#mainnavi ul li a.active { /* actives Element*/
		background: #4b545f;
		color: #fff;
		}	
	
	#mainnavi ul li a {
		display: block; 
		padding: 10px 20px;
		color: #757575; 
		text-decoration: none;
		}
	
#mainnavi ul ul {
	background: #5f6975; 
	border-radius: 0px; 
	padding: 0;
	position: absolute; top: 100%;
	}
	#mainnavi ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
		}
		#mainnavi ul ul li a {
			padding: 10px 60px;
			color: #fff;
			}	
			#mainnavi ul ul li a:hover {
				background: #4b545f;
				}
			



#mainnavi ul ul ul {
	position: absolute; left: 100%; top:0;
	}

Danke

djheke · 10. Juli 2013

Hallo!
Wenn #main zentriert sein soll dann hilft overflow:hidden; wenn nicht reicht float:left;

smisonline2 · 10. Juli 2013

Hallo,?

Was hat das mit der Höhe zu tun? Zentriert wird er ja schon durch margin: 0 auto;

djheke · 10. Juli 2013

Wer redet von der Höhe? Da du margin:0 auto verwendest kannst du overflow:hidden nehmen.
Somit passt sich main am Inhalt an.

Nachtrag:

Code:

#main {
 .....
 .....
 overflow:hidden;
}

DIv passt sich nicht an Inhalt an

smisonline2

Mitglied

djheke

Erfahrenes Mitglied

smisonline2

Mitglied

djheke

Erfahrenes Mitglied

Neue Beiträge