3 Spalten, linke Spalte unten ausrichten - Probleme im IE6

Mahoney · #1 (**permalink**) 30.03.2010, 15:14

Hallo,

ich habe ein 3-Spalten-Layout, bei der der Text der ersten Spalte unten ausgerichtet werden soll (2. Spalte = Menü, 3. Spalte = Inhalt). Beim Durchsuchen habe ich folgendes gefunden:
http://xhtmlforum.de/32119-div-zweit...usrichten.html - geht auch im firefox wunderbar, nur halt nicht im IE6 - liegt an den position:absolute bzw. relative nur ohne, kann ich es nicht nach unten ausrichten...

Hier der Code:

HTML-Code:

#seite{width:75%;margin:auto;}
#header {height:114px; border-top: solid 22px #6A3680;}
#inhalt {margin-left:25.1em;text-align:left;padding: 10px 40px 10px 10px;line-height:161%;border-color:#6B3781;border-style:solid;border-width:6px 0px 0px 0px;}
#navi {margin-left:14.2em;float:left;text-align:left;border-color:#6B3781;border-style:solid;border-width:5px 0px 0px 0px;position:absolute;}
#extra {float:left;text-align:right;color:#6B3781;line-height:150%;position:absolute;padding:0px 0px 0px 30px;bottom:10px;}
#wrap{border:solid #6A3680;border-width:0px 1px 0px 0px;position:relative;}
#cleaner {clear: both;padding: 0px;margin: 0px;}
#footer{background-color:#6A3680;font-size:0.85em;color:#FFF;text-align:right;margin:auto;padding:5px 3px 5px 0px;border-color:#FFF;border-style:solid;border-width:1px 0px 0px 0px;}

Und HTML

HTML-Code:

<div id="seite">
<div id="header"></div>
<div id="wrap">
	<div id="extra">
		text der unten ausgerichtet ist...
</div>
<div id="navi">
		<a href="">menu</a>
		<a href="">menu</a>
		<a href="">menu</a>
		<a href="">menu</a>
</div>
	<div id="inhalt">
		<h1>text</h1>

   			</div>

	<div id="cleaner"></div></div><div id="footer">&nbsp;</a></div>
</div>

Ich hab grad so gar keine Ahnung... danke....

scherii · #2 (**permalink**) 30.03.2010, 15:43

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>TEST</title>
	<style type="text/css">
	#seite{
		width:75%;
		margin:auto;
		position:relative;
	}
	#wrap{
		border:solid #6A3680 0px 1px 0px 0px;
		position:relative;
	}
	#header {
		height:114px;
		border-top: solid 22px #6A3680;
	}
	#inhalt {
		position:absolute;
		left:25.1em;
		text-align:left;
		padding: 10px 40px 10px 10px;
		line-height:161%;
		border:#6B3781 solid 6px 0px 0px 0px;
	}
	#navi {
		left:14.2em;
		border: #6B3781 solid 5px 0px 0px 0px;
		position:absolute;
	}
	#extra {
		text-align:right;
		color:#6B3781;
		line-height:150%;
		position:absolute;
		padding:0px 0px 0px 30px;
		bottom:10px;
		left:0;
	}
	#cleaner {
		clear: both;
		padding: 0px;
		margin: 0px;
	}
	#footer{
		background:#6A3680;
		font-size:0.85em;
		color:#FFF;
		text-align:right;
		margin:auto;
		padding:5px 3px 5px 0px;
		border:#FFF solid 1px 0px 0px 0px;
	}
	</style>
</head>
<body>
<div id="seite">
	<div id="header"></div>
		<div id="wrap">
			<div id="extra">
				text der unten ausgerichtet ist...
			</div>
			<div id="navi">
				<a href="">menu</a>
				<a href="">menu</a>
				<a href="">menu</a>
				<a href="">menu</a>
			</div>
			<div id="inhalt">
				<h1>text</h1>
			</div>

			<div id="cleaner"></div>
		</div>
	<div id="footer">&nbsp;</a></div>
</div>
</body>
</html>

Versuch es mal hiermit.

Der IE6 möchte bei absoluter Positionierung immer für beide Achsen (x & y) wissen, wo das Element stehen soll.
Das heisst, du musst nebst left z.B. auch top oder bottom definieren.

Ausserdem: wenn du schon absolut positionierst, dann kannst du die floats auch weglassen und nur mit der Positionierung arbeiten.

Noch was zu deinem Code: fürs nächste Mal kannst du den Code auch so formatieren, wie ich das gemacht habe, damit kann man ihn (wenn er schon nicht online zu sehen ist) wenigstens schnell lokal anschauen.

Greets,
scherii

Mahoney · #3 (**permalink**) 30.03.2010, 20:06

Hm, nein tut mir leid - da haut es jetzt auch alles auseinander - siehe Screenshot...sogar der Footer verschwindet bzw. wird überdeckt...

fricca · #4 (**permalink**) 30.03.2010, 20:13

Das Element #wrap braucht hasLayout, damit IE 6 (und 7) es als Containing Block akzeptiert.
Das abs- pos. Element braucht außerdem eine Angabe für left.

Bitte lies und beachte die Hinweise für Fragende. Codebausätze sind nicht nur anstrengend, sondern schlicht ungeeignet (Doctype!).

edit: Sorry, irgendwie hatte ich scheris Antwort übersehen. scherii, den Inhalt auch noch abs. zu positionieren ist keine gute Idee. Dann wächst #wrap nicht mehr mit und der Footer wird nicht unter dem Inhalt gehalten.

Mahoney · #5 (**permalink**) 30.03.2010, 21:45

Ahhhh - herzlichen Dank, es funktioniert!

Gruß
Mahoney

scherii · #6 (**permalink**) 31.03.2010, 11:02

Zitat:

Zitat von fricca

edit: Sorry, irgendwie hatte ich scheris Antwort übersehen. scherii, den Inhalt auch noch abs. zu positionieren ist keine gute Idee. Dann wächst #wrap nicht mehr mit und der Footer wird nicht unter dem Inhalt gehalten.

Stimmt, da hab ich nicht mehr so genau geschaut. Ich war zu sehr damit beschäftigt, aus dem Code-Gewurschtel etwas sinnvolles zu machen.
Aber du hast recht, das hätte mir auffallen sollen

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE6 "cleart" Spalte ohne ersichtlichen Grund	ppatrick	CSS	5	05.04.2010 14:50
"Springende" Spalten im IE6	sockenloch	CSS	12	16.12.2008 11:56
Zwei-Spalten-Layout hat Probleme bei der Darstellung im IE6	joseba	Site- und Layoutcheck	7	15.05.2008 10:30
Probleme mit min-height, automatische Anpassung der height anderer Spalten	mkuegle	CSS	5	01.06.2006 17:42
2 Spalten Layout - Linke Spalte bis unten	jr-ewing	CSS	2	23.11.2005 15:04