✔ Layout-Position-Problem

[Eagle-PsyX-]

Hi,

hab eine kleine Frage.

Wie krieg ich den Footer unter die Content-Box?
Denn nur die "content"-Box und der "body_foot" sollen eine variable Höhe haben.

#body_head {
  position: absolute;
  top: 0;
  width: 100%;
  height: 140px;
  background-color: #F00;
}

#body_head #banner {
  position: absolute;
  width: 100%;
  height: 101px;
  line-height: 101px;
  vertical-align: middle;
  text-align: center;
  top: 0;
  background-color: #0F0;
}

#body_head #navigation {
  position: absolute;
  width: 100%;
  height: 39px;
  line-height: 39px;
  vertical-align: middle;
  text-align: center;
  top: 101px;
  background-color: #00F;
}

#header {
  position: absolute;
  width: 100%;
  height: 44px;
  line-height: 44px;
  vertical-align: middle;
  text-align: center;
  top: 140px;
  background-color: #EEE;
}

#content {
  position: absolute;
  width: 100%;
  top: 184px;
  background-color: #CCC;
}

#footer {
  width: 100%;
  height: 21px;
  line-height: 21px;
  position: relative;
  background-color: #EEE;
}

#body_foot {
  position: relative;
  width: 100%;
  background-color: #F0F;
}

<div id="body_head">
	<div id="banner">
		{ Banner }
	</div>
	<div id="navigation">
		{ Navigation }
	</div>
</div>
<div id="header">
	{ Header }
</div>
<div id="content">
	{ Content }
	<br />
	{ Content }
	<br />
	{ Content }
	<br />
	{ Content }
	<br />
	{ Content }
	<br />
	{ Content }
</div>
<div id="footer">
	{ Footer }
</div>
<div id="body_foot">
	{ Body_foot }
</div>

MfG
Eagle

 

[Maik]

Hi,

das Problem hierbei sind die absoluten Positionsangaben, gegen die kein Kraut gewachsen ist.

mfg Maik

 

[Eagle-PsyX-]

Hi Maik

Ja habs gemerkt, und ich frag mich wieso ich die genommen habe.

Mit "position:static" also Standards funktioniert's problemlos x-D.
Dennoch Danke für die schnelle Antwort.

 

[Maik]

ich frag mich wieso ich die genommen habe.

Das hätte ich dich auch als Nächstes gefragt ;-)

mfg Maik

 

[Eagle-PsyX-]

Manchmal ist die einfachste Lösung wohl die einzige richtige