Internet Explorer Problem mit meinem Layout

[Eistoeter]

Hi

Ich bin ganz neu hier im Forum, hab euch über Google gefunden, da ich ein kompliziertes (denke ich mal) Problem habe mit CSS.

Ich habe ein CSS-Layout entworfen mit DIVs. Im Mozilla Firefox funktioniert alles einwandfrei aber im Internet Explorer gibt es viele Bugs.

Das Layout in seinem aufs Wesentliche reduzierten Zustand seht ihr erstmal hier:

http://stargate.hof-erler.de/test/test.html

Schaut es euch mal mit Firefox und IE an.


Nun, generell scheint IE ein Problem zu haben mit dynamischen Höhen und Breiten. Auch der Firefox hat dort scheinbar Probleme, allerdings habe ich einen Trick gefunden, der aber leider nur im Firefox funktioniert:

Um die Größe eines Objektes dynamisch zu bestimmen klappt dies, indem ich den DIV erstmal absolut positioniere und dann geb ich erstmal an, dass der Abstand zum oberen Bildschirmrand z.B. 100 Pixel ist, zum Linken ebenfalls 100 Pixel, genauso wie zum rechten Bildschirmrand sagen wir 300 Pixel und auch zum unteren Bildschirmrand 100 Pixel.
Wenn ich jetzt noch width: auto und height: auto mitgebe, dann streckt mir der Firefox das Objekt genau so groß, wie noch Platz zur Verüfung steht.
Internet Explorer setzt dies aber nicht um, das wäre dann wohl auch zu schön gewesen und genau deswegen funktioniert mein Layout nicht im IE.


------

So, nun ... habe ich natürlich versucht einen komplett anderen Weg zu versuchen doch bin ebenfalls gescheitert. Ich versuche jetzt mal das Problem in kleinere einzelne Probleme zu zerlegen:

Sagen wir ich habe einen Header, also ein Banner eben. Das soll sich auf 100% Gesamtbreite erstrecken und 100 Px hoch sein, so ist dies kein Problem:

position: absolute;
width: 100%;
height: 100px;
top: 0;
left: 0;
right: 0;

Jetzt möchte ich unter diesen Banner einen weiteren DIV setzen. Und zwar soll dieser ebenfalls 100% Breite haben (kein Problem) .. und .. jetzt kommt's: Die restliche Höhe, die ihm laut Browserfenster noch zur Verfügung steht, innehaben. Genauer gesagt also

Höhe des kompletten Browserfensters - 100px

Wenn ich ihm jetzt sage

position: relative;
width: 100%;
height: auto;

Dann bekomm ich nur die Höhe, die das Objekt auch tatsächlich braucht (logisch, ist ja auch von CSS so beabsichtigt mit dem auto)

So, sag ich aber

position: relative;
width: 100%;
height: 100%;

so geschieht sowohl im Firefox als auch im IE etwas Merkwürdiges. Und zwar nimmt er wirklich die Höhe des gesamten Browserfensters ALLERDINGS berücksichtigt er dabei nicht, dass 100 Pixel Höhe ja schon durch den Banner verloren sind ... demzufolge entsteht eine Scrollbar.

Wenn ich jetzt noch einen Footer darunter setzen will über position: absolute und bottom: 0 dann geht dadurch mein Content über den Footer hinaus!!

Dies wäre das erste Problem das ich habe, für das ich eine Lösung zu dringend suche.


Im Prinzip das selbe Problem existiert mit der Breite. Sagen wir ich habe nun eben das oben geschilderte Layout, allerdings soll der Content jetzt nicht mehr 100% der Breite sein, sondern ich habe sozusagen zwei Spalten. Die rechte Spalte ist nun ein fester Wert und soll 300 Pixel breit sein, dann sag ich einfach:

position: absolute;
width: 300px;
right: 0;
top: 100px;

Die linke Spalte soll nun den restlichen Platz einnehmen, also quasi

Komplette Browserfensterbreite - 300 Pixel

position: absolute;
left: 0;
top: 100px;
width: auto / 100% <- funktioniert beides nicht

Bei auto habe ich nur soviel Breite, wie das Objekt auch tatsächlich braucht und bei 100% habe ich wieder den Fall, dass mein Objekt über den Rand hinaus geht, da er die 300 Pixel nicht mitberücksichtigt, die durch die rechte Spalte schon verloren sind.



Ich glaube das reicht nun erstmal, wenn ich darauf Antworten bekomme wäre mir wirklich sehr geholfen. Wenn das jetzt überhaupt jemand verstehen konnte mit was ich mich da so schwer tue zu erklären *gg*


MFG

[sam]

Code: Alles auswählen

Not Found
The requested URL /test/test.html was not found on this server.

Apache/1.3.37 Server at stargate.hof-erler.de Port 80

[Laus]

Sagen wir ich habe einen Header, also ein Banner eben. Das soll sich auf 100% Gesamtbreite........
Dies wäre das erste Problem das ich habe, für das ich eine Lösung zu dringend suche.

Dafür benutzt du am besten -->footer stick alt<-- Schau dir einfach mal den Quelltext dieser Seite an.

Im Prinzip das selbe Problem existiert mit der Breite.

Warum das ganze so Kompliziert? Und noch dazu Position absolut.

Code: Alles auswählen

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<style type="text/css">
<!--
* {margin:0;padding:0;}
html{height: 100%;}
body{height: 100%;}
#eins {float:left;width:300px;background:red;}
#zwei {background:green;margin:0 0 0 300px;}

-->
</style>
</head>
<body>
<div id="eins">links<br><br><br><br></div>
<div id="zwei">rechts<br><br><br><br></div>
</body>
</html>

Dieser wenige Code noch dazu mit größter flexibilität macht doch auch genau das was du willst.

Gruß Xaver