CSS-Seitenlayout: Probleme mit Firefox

Rethel · #1 (**permalink**) 13.10.2005, 12:13

Verzweifelt kämpfe ich mit einem Problem bei der tabellenlosen Layoutkonstruktion mit CSS. Der Übeltäter ist einmal nicht IE, sondern Firefox (oder ein Denkfehler meinerseits).

Die Lage: Ein zentriert auf der Seite ausgerichteter div-Container (#arbeitsflaeche) enthält zwei weitere Container (#kopf und #haupt). In Letzterem sind wiederum zwei div-Bereiche mittels float left bzw. right zu zwei Spalten angeordnet. Während nun IE 6 und Opera 7.5 keine Probleme machen, weigert sich Firefox hartnäckig, #arbeitsflaeche auf die Höhe von #haupt auszudehnen. Macht man die Box mit border sichtbar, endet #arbeitsflaeche immer nach #kopf, der folgende Bereich #haupt mit den beiden floats wird – obwohl Kindelement von #arbeitsflaeche – nicht umschlossen, sondern ragt darüber nach unten hinaus.
Musterseite.

Auch wenn es simpel aussieht: Die Tücken lauern im Detail! Ich habe schon alles mögliche probiert, aber bestenfalls Teilerfolge errungen. Jetzt bin ich mal gespannt, ob jemand eine Lösung findet oder mir sagen kann, was ich da übersehe.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

body
{
	margin: 0;
	padding:0;
  text-align: center;
  min-width:748px;
  background: #339BBE;
}

#arbeitsflaeche
{
  border: 1px solid red;
  margin: 0px auto;
  width: 748px;
	text-align:left;
  background: #ffffff;
}

#kopf
{
  border: 0px solid red;
  width: 748px;
  margin: 0px;
  height: 142px;
}

#haupt
{
  border: 1px solid orange;
  float: left;
}

#leftnav
{
  border: 1px solid green;
  float: left;
  width: 159px;
}

#text
{
  border: 1px solid green;
  float: right;
  width: 570px;
	margin:0px 0px 0px 0px;
	text-align: left;
}

//-->
</style>
<title>Layouttest: Zentriert, Kopfzeile, zweispaltig</title>
</head>
<body>
  <div id="arbeitsflaeche">
    <div id="kopf">
      Seitenkopf

Der rote Rand kennzeichnet die div-Box #arbeitsflaeche (Hintergundfarbe weiß). Die nachfolgenden divs sind in sie verschachtelt. Trotzdem wird in Firefox die orangene Box mit allen Inhaltselementen nicht von #arbeitsflaeche umschlossen.
    </div>
    <div id="haupt">
      <div id="leftnav">
        Navigation
navigation
navigation

      </div>
      <div id="text">
        Hauptbereich

        
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
      </div>
    </div>
  </div>
</body>
</html>

cgdesign · #2 (**permalink**) 13.10.2005, 12:57

wer floatet muss auch clearen!

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" />
<meta name="Author" content="J&ouml;rg Exner" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<style type="text/css">
<!--
body
{
	text-align: center;
	min-width: 748px;
	background: #339BBE;
	margin: 0;
	padding: 0;
}
#arbeitsflaeche
{
	border: 1px solid red;
	width: 748px;
	text-align: left;
	background: #fff;
	margin: 0 auto;
}
#kopf
{
	border: 0 solid red;
	width: 748px;
	height: 142px;
	margin: 0;
}
#haupt
{
	float: left;
	border: 1px solid orange;
}
#leftnav
{
	border: 1px solid green;
	float: left;
	width: 159px;
}
#text
{
	border: 1px solid green;
	float: right;
	width: 570px;
	text-align: left;
	margin: 0;
}
//-->
</style>
<title>Layouttest: Zentriert, Kopfzeile, zweispaltig</title>
</head>
<body>
<div id="arbeitsflaeche">
	<div id="kopf">
		Seitenkopf

		

		Der rote Rand kennzeichnet die div-Box #arbeitsflaeche (Hintergundfarbe weiß). Die nachfolgenden divs sind in sie verschachtelt. Trotzdem wird in Firefox die orangene Box mit allen Inhaltselementen nicht von #arbeitsflaeche umschlossen.
	</div>
	<div id="haupt">
		<div id="leftnav">
			Navigation

			navigation

			navigation

		</div>
		<div id="text">
			Hauptbereich

			

			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et 
		</div>
	</div>
	<p style="clear: both;"></p>
</div>
</body>
</html>

Rethel · #3 (**permalink**) 13.10.2005, 13:10

Kurz und schmerzlos – und sehr hilfreich. Danke!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Sitecheck - Problem mit CSS und Darstellung mit Firefox	muijschen	Site- und Layoutcheck	2	27.07.2008 12:16
IE und Firefox - CSS nicht korrekt	wolf1985	CSS	5	29.04.2008 12:07
css probleme in firefox	gollib	CSS	4	08.11.2006 18:47
probleme mit div - background-image im firefox	dasjo	CSS	5	05.01.2006 12:43
CSS Design Probleme	Hawklan	CSS	5	12.08.2004 11:45