# wrapper in wrapper



## akali (3. Januar 2012)

Hi Community,

ich habe ein kleines aber nerviges Problem:

ich möchte einen "wrapper" in einem "wrapper" via div machen.
der sinn ist es, dass der innere schmaler ist als der äußere und ich dadurch einen andersfarbigen rand um den inneren wrapper legen kann.

mein code


```
#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}

#innerwrapper {
background-color: #000000;
width: 70%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}
```



```
<!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=iso-8859-1" />
  <title>website</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
	<div id="outerwrapper">
		
		
				<div id="innerwrapper">
	</div>
		
		
	</div>

	
</body>

</html>
```

wieso funktioniert dass nicht so wie ich es mir dneke ? ^^


cheers akali


----------



## threadi (3. Januar 2012)

Du gibst Höhe und Breite jeweils prozentual an. Diese Werte haben aber keinen Bezug, da die umliegenden Elemente body und html keine Höhe und Breite zugewiesen bekommen haben. Die Breite sollte bei Blockelementen wie html und body ohnehin schon 100% sein. Ergänze mal


```
html, body { height: 100%; }
```

Dann sollten deine beiden <div>'s auch den ganzen Viewport ausfüllen.


----------



## akali (3. Januar 2012)

oh, tut mir leid habe das html und body css vergessen zu kopieren...

das hatte ich schon mit den 100% im body...
nun geht es so aber auch nicht!

nun die komplette css:


```
html,body
{
	background: #cdcdcd;
	margin: 0;
	padding: 0;
	height: 100%;
}

#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}

#innerwrapper {
background-color: #000000;
width: 70%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}
```


----------



## threadi (3. Januar 2012)

Ah, dein Problem ist glaube ich ein ganz anderes.

Setz mal #outerwrapper auf "height: 100%;". Dann vererbt sich die Höhe auch an #innerwrapper. Es nimmt dann 100% der Höhe ein. 

Jetzt musst Du "nur" noch oben und unten den Abstand des #innerwrapper setzen. Das ginge z.B. über prozentuale Angaben für die Außenabstände von #innerwrapper für oben und unten.


----------



## akali (3. Januar 2012)

hmm, es funktioniert immer noch nicht !
ich habe es jetzt so gemacht :


```
html,body
{
	background: #cdcdcd;
	margin: 0;
	padding: 0;
	height: 100%;
}

#outerwrapper {
background-color: #FFFFFF;
width: 75%;
margin: auto;
min-height: 100%;
height:auto !important;
height:100%;
overflow: hidden !important;
}

#innerwrapper {
background-color: #000000;
margin: 0 5%;
overflow: hidden !important;
}
```

könntest du mir das css für den innerwrapper geben ?


edit:
es soll am ende genau so hoch sein wie der outerwrapper aber ein bisschen schmaler , das habe ich jetzt mit margin 0 5% versucht zu realisieren

edit2:
wenn ich beim #innerwrapper die height auf z.b. 100px setze dann wird es angezeigt! aber bei % nicht...


----------



## threadi (3. Januar 2012)

```
margin: 5% auto;
```

wäre der richtige Wert denke ich. Beachte die Reihenfolge der 4 Parameter für margin:
http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin

Lass ggfs. auch min-height bei #outerwrapper weg. Ich habe das mit Firebug getestet und damit Erfolg gehabt.


----------



## akali (3. Januar 2012)

also,

ich wäre dir sehr dankbar wenn du mir die css des innerwrapper komplett postest.
Ich weiß nicht ob du was durcheinander gebracht hast oder ich komplett dumm bin :-D


durch margin: 5% auto; wird doch der abstand von oben und unten im 5% verändert.
ich möchte ja, dass es links und rechts jeweils 5% schmaler ist. und oben und unten über 100% geht sprich genau so hoch wie outerwrapper.

ich habe nun in innerwrapper mal ein &nbsp eingetragen und nun bekomme ich eine zeile angezeigt, wo es von den außenabständen her passt, nur hat es noch keine 100% höhe******
Ich wäre dir wirklich SEHR dankbar wenn du einfach das css vom innerwrapper posten könntest...

cheers


----------



## akali (3. Januar 2012)

vielleicht ist es anschualicher wenn man es vor seinen augen hat.

http://www.christlieb.eu/ct 

und um es einfach auszudrücken, dass weiße soll bis nach ganz unten gehen :-D

Ich hoffe jemand weiß eine lösung.

cheers eure akali


----------



## threadi (3. Januar 2012)

Bei deinem Link musste ich mit Firebug nur #outerwrapper von


```
min-height: 100%;
```

auf


```
height: 100%;
```

ändern, wie oben schon geschrieben.

Den Außenabstand von #innerwrapper dann noch anzupassen, so dass Ränder entstehen ist jedoch dann nicht mehr wirklich möglich. Wenn Du statt dessen in #outerwrapper noch


```
padding: 2% 0;
```

ergänzt, sollte es passen.


----------

