Großes DIV Problem

Seit gestern hab ich ein Problem, meine div Box vergrößert sich nicht! Ich hab verschiedenfarbige Boxen, die in der Mitte sollte sich eigentlich immer automatisch vergrößern, tut sie aber nicht. Ich habs mit allen Farben versucht, ging nicht. Der Link zu meiner Homepage: Habbo - Pro Mafia . Die Mittlere Box vergrößert sich nicht, nur auf der Startseite vergrößert sie sich. Auf den anderen Seiten wird sie nicht breiter.Mein Problem ist also, das es nicht breiter wird.

Der CSS Code zur blauen Box:

div#blue_header{ background: url(../_images/headers/blue.png); width: 214px; height: 26px; padding-left: 12px; padding-right: 30px; padding-top: 10px; color: #6d98a8; font-weight: bold; text-transform: uppercase; text-shadow: #d4f3ff 1px 1px 0px; text-decoration: none; cursor: pointer; }

Von einer anderen Farbe :

div#pink_header{
	background: url(../_images/headers/pink.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #bc7777;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fcd7d7 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}

Komplette CSS Datei:

/* 
	LAYOUT DESIGNED & CODED BY JAKE JAMES
	YEAHITSJAKE@LIVE.CO.UK
*/








body{
	background: url(../_images/backgrounds/green_background.png);
	font-family: "Tahoma", Arial, Verdana;
	font-size: 11px;
	color: #6a6a65;
	margin: 10px;
}


a, a:hover, a:link, a:visited{
	font-family: "Tahoma", Arial, Verdana;
	font-size: 11px;
	font-weight: bold;
	color: #6a6a65;
	text-decoration: none;	
}


input, textarea, select, option{
	font-family: "Tahoma", Arial, Verdana;
	font-size: 11px;
	color: #6a6a65;
	border: 1px dashed #6a6a65;
}


p, form, table, tr, td, th{
	border: 0;
	padding: 0;
	margin: 0;
	height: auto;
	width: auto;
}


img a{
	border: 0;
}


div#wrapper{
	width: 1003px;
	margin: auto;
}


div#top{
	background: url(../_images/top.png);
	width: 1003px;
	height: 127px;
}


	div#radio_stats{
		background: url(../_images/radio_stats.png);
		width: 253px;
		height: 92px;
		float: right;
		color: #FFFFFF;
		margin: 10px;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 14px;
		overflow: hidden;
	}
	
	div#radio_stats img{
		margin-top: 1px;
	}


div#nav_bar{
	background: url(../_images/navigation_bar.png);
	width: 939px;
	height: 30px;
	padding-left: 32px;
	padding-right: 32px;
	color: #a48500;
}


	a#home{
		background: url(../_images/navigation/home.png);
		width: 69px;
		height: 30px;
		float: left;
	}
	
	a#home:hover{
		background: url(../_images/navigation/hover/home.png);
	}
	
	a#thehablets{
		background: url(../_images/navigation/thehablets.png);
		width: 110px;
		height: 30px;
		float: left;
	}
	
	a#thehablets:hover{
		background: url(../_images/navigation/hover/thehablets.png);
	}
	
	a#news{
		background: url(../_images/navigation/news.png);
		width: 66px;
		height: 30px;
		float: left;
	}
	
	a#news:hover{
		background: url(../_images/navigation/hover/news.png);
	}
	
	a#radio{
		background: url(../_images/navigation/radio.png);
		width: 69px;
		height: 30px;
		float: left;
	}
	
	a#radio:hover{
		background: url(../_images/navigation/hover/radio.png);
	}
	
	a#media{
		background: url(../_images/navigation/media.png);
		width: 70px;
		height: 30px;
		float: left;
	}
	
	a#media:hover{
		background: url(../_images/navigation/hover/media.png);
	}
	
	a#guides{
		background: url(../_images/navigation/guides.png);
		width: 118px;
		height: 30px;
		float: left;
	}
	
	a#guides:hover{
		background: url(../_images/navigation/hover/guides.png);
	}	
	
	a#goodies{
		background: url(../_images/navigation/goodies.png);
		width: 85px;
		height: 30px;
		float: left;
	}
	
	a#goodies:hover{
		background: url(../_images/navigation/hover/goodies.png);
	}
	
	a#forum{
		background: url(../_images/navigation/forum.png);
		width: 73px;
		height: 30px;
		float: left;
	}
	
	a#forum:hover{
		background: url(../_images/navigation/hover/forum.png);
	}


div#sub_nav_bar{
	background: url(../_images/sub_navigation_bar.png);
	width: 933px;
	height: 29px;
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 13px;
}


	div#sub_nav_bar a{
		font-weight: normal;
		color: #6a6a65;
		padding-left: 5px;
		padding-right: 5px;
	}
	
div#container{
	background: url(../_images/main_container.png);
	width: 961px;
	padding-left: 18px;
	padding-right: 18px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin: auto;
	color: #3f4d50;
	overflow: hidden;
}


div#left{
	width: 256px;
	float: left;
	overflow: hidden;
	margin-right: 8px;
}


div#blue_header{
	background: url(../_images/headers/blue.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #6d98a8;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #d4f3ff 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#pink_header{
	background: url(../_images/headers/pink.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #bc7777;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fcd7d7 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#green_header{
	background: url(../_images/headers/green.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #738a44;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #dbecb8 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div.box_background{
	background: url(../_images/box.png);
	width: 236px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 1px;
	overflow: hidden;
}


div.box_bottom{
	background: url(../_images/box_bottom.png);
	width: 256px;
	height: 10px;
	margin-bottom: 8px;
}


div#middle{
	width: 433px;
	float: left;
	margin-right: 8px;
}


div#content_header{
	background: url(../_images/headers/content.png);
	width: 391px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #6d98a8;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #d4f3ff 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
}


div.content_box{
	background: url(../_images/content_box.png);
	width: 413px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 1px;
	overflow: hidden;
}


div.content_bottom{
	background: url(../_images/content_bottom.png);
	width: 433px;
	height: 8px;
}


div#right{
	width: 256px;
	float: left;
	overflow: hidden;
}


div#grey_header{
	background: url(../_images/headers/grey.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #868679;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fffffe 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#lime_header{
	background: url(../_images/headers/lime.png);
	width: 214px;
	height: 26px;
	padding-left: 12px;
	padding-right: 30px;
	padding-top: 10px;
	color: #959b6d;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #f6ffbd 1px 1px 0px;
	text-decoration: none;
	cursor: pointer;
}


div#bottom{
	background: url(../_images/bottom.png);
	width: 973px;
	height: 47px;
	color: #846b00;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
	text-align: right;
}


div.headline1{
	background: #e9e9e9;
	width: 226px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
}


div.headline2{
	background: #f5f5f5;
	width: 226px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	cursor: pointer;
}


input.custom{
	background: url(../_images/input.png);
	width: 223px;
	height: 18px;
	border: 0;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 5px;
	margin-bottom: 3px;
}


input.buttom{
	background: url(../_images/login.png);
	width: 68px;
	height: 24px;
	text-align: center;
	border: 0;
	padding-bottom: 3px;
}


a#news_banner{
	background: url(../_images/news/thehablets.png);
	width: 425px;
	height: 23px;
	float: left;
	margin-bottom: 8px;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	padding-top: 80px;
	color: #FFFFFF;
	font-weight: normal;
}


a.tooltip
{
  position: relative;
  text-decoration: none;
  color: black;
}


a.tooltip span
{
  display: none;
}


a.tooltip:hover span
{
  position: absolute;
  display: block;
  top: 1.5em;
  left: 2em;
  border: 1px solid black;
  background-color:white;
  padding: 0.2em;
}








div#shade{
	background: url(../_images/shade.png);
	width: 405px;
	height: 18px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 4px;
	color: #FFFFFF;
	font-weight: normal;
}

Du verwendest jedes Mal eine andere ID und/oder Klasse um die Box aufzubauen. Wenn Du die selben IDs und Klassen wie von der Startseite auch für die Contentseiten verwendest, passt es.

Ich benutzte ein CMS (IV). Ich zeig dir mal den Code von meinem Hautptemplate:

{TITLE}
{BOXHEAD}
{NAVBAR}
{SHOUTBOX}
{BOXENLINKS}
</div>
<div id="middle">
    
    {CONTENT}
</div>
<div id="right">
    {BOXRECHTS}
    
   
</div>
Copyright © Me.and.You 2012

Die ganzen {DINGER} sind Platzhalter, für jede Box hab ich auch noch Templates:

Blaue Box Template:

        {TITLE}
    </div>
    <div class="box_background" id="featured_box">
        {BODY}
    </div>
    <div class="box_bottom" style="margin-bottom: 0;"></div>

Hellgrüne Box:

{TITLE}
    <div class="box_background" id="djotw_box">
           {BODY}
    </div>
    <div class="box_bottom"></div>

Die haben keinerlei Unterschiede… Es liegt weniger an den Boxen, egal welche Farbe ich nehme die Box vergrößert sich nicht! Falls einer helfen will, und mein Problem nicht versteht, ich könnte euch meine Teamviewer Daten geben.

Ich hab jetzt auf der Startseite noch eine Box erstellt in der Mitte, und die wird auch nicht größer, woran kann das liegen?!? Homepage Link : http://emresprojekte.bplaced.net/

Ich hab versucht den blauen Header zu vergrößern, hat geklappt aber die anderen waren schon so groß wie der header. Am Header liegt es also nicht: Der Mittlere und untere Teil hat einen Fail…

Der erste Fehler besteht schon mal darin, dass du verschachtelte Tags verwendest, die nicht nur veraltet, sondern auch Inline-Elemente sind. Davon abgesehen verstehe ich die Frage nicht. Die Mitte (div #middle?) ist so breit, wie im CSS definiert und so hoch, wie der darin liegende Content.

Hat mich gerade zum nachdenken gebracht, danke. :smiley:

Problem gelöst!