[CSS] Eine DIV-Box nach oben, die andere nach unten

[sverebom]

Mal bitte hierhin schauen (ihr seht es wahrscheinlich erst ab 1280x1024)

Die Box, die den Footer enthält (Bild mit dem Schiff sowie die Copyrights) soll immer unten bleiben, auch wenn die darüber positionierte Content-Box die Höhre des Browserfenster nicht ausnutzt. Ebenso soll der Footertext untenbündig angezeigt werden und an beidem scheitere ich momentan. Hier der CSS-Code

body {
	margin: 0 0 0 0;
	background: #446BB0 url(bilder/body/unten.gif) repeat-x bottom;
}

#header {
	width: 760px;
	height: 113px;
	background: #A1B5D7 url(bilder/body/logo.gif) no-repeat top;
}
	
#globalnavi {
	width: 760px;
	text-align: left;
	background: #A1B5D7 url(bilder/body/navibg.gif) repeat-x bottom;
}

#globalnavi ul {
	margin: 0;
	list-style: none;
	padding: 0 0 0 15px;
}

#globalnavi li {
	margin: -1px;
	display: inline;
}

#globalnavi a {
	color: #FFFFFF;
	background: #BD0000;
	text-decoration: none;
	border: 1px solid #BD0000;
	padding: 2px 12px 2px 12px;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

#globalnavi a:hover {
	color: #BD0000;
	background: #FFFFFF;

}

#globalnavi .active {
	color: #BD0000;
	background: #FFFFFF;
	padding: 3px 12px 2px 12px;
	border-top: 1px solid #BD0000;
	border-left: 1px solid #BD0000;
	border-right: 1px solid #BD0000;
	border-bottom: 1px solid #FFFFFF;
}

#inhalt {	
	width: 730px;
	padding: 15px;
	color: #000000;
	text-align: left;
	background: #FFFFFF;
	border-left: 1px solid #BD0000; 
	border-right: 1px solid #BD0000;
	border-bottom: 1px solid #BD0000;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

html>head:first-child+body #inhalt {
	width: 728px;
}

#inhalt a {
	color: #BD0000;
	text-decoration: underline;
}

#inhalt a:hover {
	text-decoration: none;
}

#inhalt .headline {
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

#inhalt .subline {
	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
}
	
#inhalt .text {
	text-align: justify;
	padding: 5px 0 5px 10px;
	border-bottom: 1px dotted #BD0000; 
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}	
	
#subnavi {
	color: #000000;
	text-align: center;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

#subnavi ul, li {
	display: inline;
	list-style: none;
}

#subnavi a {
	color: #BD0000;
	text-decoration: underline;
}

#subnavi a:hover {
	text-decoration: none;
}

#form {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

#form input, #form textarea {
	margin: 0;
	width: 174px;
	overflow: auto;
	border: 1px solid #BD0000;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

#form .button {
	width: 86px;
	border: none;
	color: #FFFFFF;
	background: #BD0000;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

.vertibord {
	border-right: 1px dotted #BD0000;
}

.horibord {
	padding-bottom: 3px; 
	border-bottom: 1px dotted #BD0000;
}

#footer {
	width: 760px;
	height: 195px;
	color: #FFFFFF;
	vertical-align: bottom;
	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
	background: url(bilder/body/bottom.gif) no-repeat bottom;
}

#footer a {
	color: #FFFFFF;
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
}

Danke für eure Hilfe

 

[PuppetMaster]

Schau mal, ob das auch im IE hinhaut...

#footer {
        margin:0px auto;
        position:absolute;bottom:0px;
	width: 100%;
	height: 195px;
	color: #FFFFFF;
	font: normal 9px Verdana, Arial, Helvetica, sans-serif;
	background: url(bilder/body/bottom.gif) no-repeat bottom;
}

 

[frow]

Schau mal, ob das auch im IE hinhaut...

Warum im IE um Gotteswillen

Der hat doch wohl die schlechteste CSS Umsetzung von allen.

Nimm zum Entwickeln Firefox mit dem Webdeveloper Plugin. Das ist echt genial.

IE.. am besten vergessen alle schnell, dass es den Browser je gegeben hat

 

[sverebom]

@Puppetmaster
Das hab ich gestern schon versucht. Da war die Box zwar unten, aber nicht mittig (hab alles versucht, aber ich bekam sie nicht mittig). Jetzt hat sie sich seltsamerweise garnicht gerührt

@frow
1. Firefox ist mein Standartbrowser
2. Webdeveloper PlugIn ist installiert
3. Wo ist deine Hilfestellung zu meinem Anliegen?

 

[Benjamin_L]

1. heisst es standar"d"
2. probier position: absolute; bottom: 0px; margin-left:auto; margin-right: auto;
für auto muss "width" definiert sein

 

[PuppetMaster]

frow: Vielen Dank für deine intelligente Anregung. Auf die lächerlichen 90% der Besucher verzichtet man doch allzugern.


@BurningStar4
Also bei mir funktionierts...

 

[sverebom]

Hui ... mit deinem oder mit Benjamins Vorschlag?
Morgen früh direkt nochmal testen. Vielleicht hab ich mal wieder die falche Datei in die Vorschau geladen, die CSS-Datei nicht mit hochgeladen oder den Cache nicht geleert.

Besten Dank

Mööp, ist ja deinen Screenshot zu entnehmen.
Habs eben getestet (dieses Webdeveloper PlugIn ist ja richtig geil), aber bei mir rührt sich nichts

Edit die Zwote:
Aaaaah, jetzt funktioniert es, warum auch immer
Aaaaaber, wie kriege ich nun noch den Text nach unten?

Nachtrag: Schade, im IE will es nicht funktionieren. Der verhaut es die BOX nach rechts fast aus dem Fesnter raus