CSS Problem - zweiter Container wird unter dem ersten dargestellt.

noScale · #1 (**permalink**) 17.01.2009, 06:56

Guten Morgen,

ich bin relativ neu hier im Forum, komme aus der ActionScriptler Ecke und beschäftige mich neuerdings mit Javascript (was ja nahe liegt) und Ajax. Nun führt ja (leider) kein Weg mehr an XHTML und CSS vorbei, somit muss ich ja auch mal damit anfangen.

Jetzt ist folgendes:
Ich möchte meine Html Seite vertikal mit zwei Hintergrundfarben teilen. Ich habe mich für zwei divs entschieden und wollte diese mit der clear Eigenschaft ausrichten. Funktioniert seltsamerweise auch im Firefox und Opera. Nur im Ie wird es weiter unten dargestellt:

HTML-Code:

html, body {
  height:100%;
  margin: 0;
  padding: 0;
}
#links {
	float: left;
	width: 50%;
	background: #CCCCCC;
	height: 100%;
}
#rechts {
	float: right;
	width: 50%;
	background: #990000;
	height: 100%
}

Ich habe mich für die divs entschieden, da ich jeweils in beiden Containern später ein div horizontal und vertikal zentrieren will. Wieso funzt das denn nicht. Bin auch bei der Suche nicht fündig geworden.

Vielen Dank.
noScale

hubspe · #2 (**permalink**) 17.01.2009, 07:17

Moin,

Zitat:

Zitat von noScale

Wieso funzt das denn nicht. Bin auch bei der Suche nicht fündig geworden.

Gib uns entweder einen Link zum Problem oder den kompletten, lauffähigen XHTML/CSS-Code.
Nur damit wir nicht aneinander vorbeireden.

Zitat:

Zitat von noScale

Nun führt ja (leider) kein Weg mehr an XHTML und CSS vorbei, somit muss ich ja auch mal damit anfangen.

Jep, du wirst wohl nicht umhin kommen, dir das eine oder andere Buch zuzulegen. Little Boxes 1 + 2 sind für den Anfang das Richtige.

noScale · #3 (**permalink**) 17.01.2009, 07:34

Zitat:

Zitat von hubspe

Moin,
Gib uns entweder einen Link zum Problem oder den kompletten, lauffähigen XHTML/CSS-Code.
Nur damit wir nicht aneinander vorbeireden.

HTML-Code:

<!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>Layout-&Uuml;bung</title>
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
</head>

<body>
	<div id="links">
		<div id="linkerContainer">
			<a href="ergebnis_links.html"><img src="links.jpg" width="200" height="100" border="0" alt="Linker Container" /></a>
		</div>
	</div>
	
	<div id="rechts">
		<div id="rechterContainer">
			<a href="ergebnis_rechts.html"><img src="rechts.jpg" width="200" height="100" border="0" alt="Rechter Container" /></a>
		</div>
	</div>
	

</body>
</html>

Css halt wie oben - ich hoffe es ist verständlich was ich will.

Zitat:

Zitat von hubspe

Jep, du wirst wohl nicht umhin kommen, dir das eine oder andere Buch zuzulegen. Little Boxes 1 + 2 sind für den Anfang das Richtige.

Hab mir HTML/XHTML und Cascading Stylesheets von O´Reilly besorgt. Werde die erstma durcharbeiten... Gibt viel zu tun

Danke für die Mühe

hubspe · #4 (**permalink**) 17.01.2009, 09:26

Moin,

der IE benötigt immer a weng mehr Platz.
Wenn alles auf Kante genäht ist, drückt er die rechte Box nach unten, obwohl es von den Breiten eigentlich passen müßte.

Du könntest entweder die Boxen schmaler machen (ca. je 48%), oder du läßt nur die linke Spalte floaten und die rechte bekommt kein width und einen linken margin (margin-left:50%).

Evtl. noch den Double-Margin-Bug für den IE6 berücksichtigen, obwohl es bei mir auch so ging.

noScale · #5 (**permalink**) 17.01.2009, 09:29

Ah, alles klar. Ich dachte im CSS stimmt was nicht.
Vielen Dank.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Spry Menu Problem mit Hintergrund bei Mouseover	myron	CSS	9	12.07.2009 13:34
CSS Design soll sich dem Content anpassen	hujuzka	CSS	7	10.06.2009 11:45
CSS Problem .. mittlerer Container variabel	BallaBalla07	CSS	0	21.03.2008 14:38
CSS "streckende" container	Illo2002	CSS	5	21.04.2006 08:56
css layout problem mit 3 zentrierten div´s	horst	CSS	5	19.08.2005 09:34