✔ Float/Clear-Problem

Eagle-PsyX-

Eagle-PsyX-

Erfahrenes Mitglied
Hi,

ich hab gerade ein seltsames Problem mit zwei gefloateten Boxen und einem clear dadrunter.
Was mich er wundert, dass ich das so öfters benutzte/benutzt habe aber hier ein Fehler aufkreuzt, wenn eine Box zu viel Inhalt hat. Ich meine irgendwas vergessen oder übersehen zu haben.

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[...]
<div id="outer">
	<div id="header">
		<!--<div id="logo"><img src="http://www.tutorials.de/Publisher/img/logo.png" /></div>-->
	</div>
	<div id="inner">
		<div id="navigation">
			<div class="nav_box">
				<div class="header">
					<h2>[Header]</h2>
				</div>
				[Navigation]
				<div class="footer"></div>
			</div>
			<div class="nav_box">
				<div class="header">
					<h2>[Header]</h2>
				</div>
				[Navigation]
				<div class="footer"></div>
			</div>
		</div>
		<div id="content">
		[Content]
		<br />
		<br />
		<br />
		[Content]
		<br />
		<br />
		<br />
		[Content]
		<br />
		<br />
		<br />
		[Content]
		<br />
		<br />
		<br />
		</div>
		<div style="clear:both;"></div>
	</div>
	<div id="footer"></div>
</div>
CSS: 
/* GENERAL */
* {
  padding: 0;
  margin: 0;
  border: 0;
}

body {
  background-color: #FFF;
  background-image: url("img/body_background.png");
  background-repeat: repeat-x;
  font-weight: normal;
  text-decoration: none;
  font-size: 11pt;
  font-family: Calibri,Verdana,Arial,Geneva,Helvetica,sans-serif;
  color: #000;
  text-align: center;
}

a, p {
  color: #000;
  text-decoration: none;
}

*:active, *:focus {
  outline: none;
}


/*  LAYOUT */
#outer {
  width: 970px;
  margin: 0 auto;
  text-align: left;
}

#outer #header {
  width: 970px;
  height: 84px;
  background-image: url("img/header.png");
  background-repeat: no-repeat;
}

#outer #header #logo {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}

#outer #inner {
  width: 970px;
  background-image: url("img/background.png");
  background-repeat: repeat-y;
}

#outer #inner #navigation {
  width: 190px;
  float: left;
  background-image: url("img/nav_background.png");
  background-repeat: repeat-y;
  margin-left: 10px;
}

#outer #inner #content {
  width: 770px;
  float: right;
  background-image: url("img/signet.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}

#outer #footer {
  width: 970px;
  height: 42px;
  background-image: url("img/footer.png");
  background-repeat: no-repeat;
}

/* BOXES */
.nav_box {
  width: 168px;
  background-image: url("img/box_background.png");
  background-repeat: repeat-y;
  margin-left: 6px;
  margin-top: 15px;
}
.nav_box .header {
  width: 168px;
  height: 28px;
  background-image: url("img/box_header.png");
  background-repeat: no-repeat;
  line-height: 28px;
  vertical-align: middle;
}
.nav_box .header h2 {
  padding-left: 25px;
  font-size: 11pt;
}

.nav_box .footer {
  width: 168px;
  height: 9px;
  background-image: url("img/box_footer.png");
  background-repeat: no-repeat;
}

Desweiteren gibt's ein kleines Problem mit ".nav_box .footer" im IE6.
 

Anhänge

  • screen.jpg
    screen.jpg
    9,7 KB · Aufrufe: 13
Zuletzt bearbeitet:
Hi,

ich gehe mal davon aus, dass sich in deinem Screenshot links unten der Block .footer aus dem Navigationsbereich befindet.

Nur kann ich diesen Fehler mit deinem gezeigten Code bei mir in keinem Browser reproduzieren:

float-clear.jpg

Steht die Seite online zur Verfügung, um dort mal einen Blick drauf werfen zu können?

Oder habe ich jetzt etwa dein Anliegen mißverstanden?

Was den IE6 betrifft, so macht sich beim DIV #navigation sein "Doubled-Float-Margin-Bug" bemerkbar, womit er den rechten Block #content nach unten umbricht.

Beim angesprochenen DIV .footer mußt du zusätzlich overflow:hidden angeben, damit er das Element nicht höher wie die gewünschten 9px darstellt.

mfg Maik
 
Hi, danke für die schnele Reaktion.
Ich hab dir eine Kopie per IM geschickt.

Im IE6 hab ich dieses Erscheinungsbild (ja ich weiß, der IE kriegt noch seperate GIFs).

Ergänzung:
Ok danke, das IE6-problem ist gelöst.

P.S.: Der HTML/CSS Code ist W3C valide wie ich gerade merke^^

Erzgänzung 2:
So ich habe es auch gefärbt. Und irgendwie will das hell-grüne nicht weiter runter... Und in der Topographie liegt auch kein Fehler vor.
 

Anhänge

  • ie6.jpg
    ie6.jpg
    52,8 KB · Aufrufe: 8
  • bug.jpg
    bug.jpg
    18,9 KB · Aufrufe: 8
  • top.jpg
    top.jpg
    12 KB · Aufrufe: 8
Zuletzt bearbeitet:
Ein "Float/Clear"-Problem liegt hier überhaupt nicht vor.

Vielmehr hast du in dem Konstrukt das Problem, dass das #navigation-Hintergrundbild ("nav_background.png") bei zunehmenden Inhalt innerhalb von #content nicht bis zum Footerbereich wiederholt wird, und sich so eine Lücke dazwischen auftut.

Damit dies so funktioniert, müsste dieses Hintergrundbild stattdessen in einem der beiden übergeordneten und umschliessenden DIVs #inner oder #outer eingebunden werden, da diese auch in der Höhe mitwachsen, was bei dem benachbarten Block eben nicht der Fall ist.

mfg Maik
 
Jo, das schon, aber der linke Block #navigation besitzt keinerlei Bezug zum Inhaltsumfang des benachbarten Blocks #content, und verharrt in der Höhe, die sich durch seinen Inhalt ergibt.

mfg Maik
 
Die Lösung könnte beispielsweise so lauten:

HTML: 
<div id="outer">
        <div id="header">
                <!--<div id="logo"><img src="../../Publisher/img/logo.png" /></div>-->
        </div>
        <div id="inner">
             <div id="inner2">
                <div id="navigation">
                        ...
                </div>
                <div id="content">
                        ...
                </div>
                <div style="clear:both;"></div>
             </div>
        </div>
        <div id="footer"></div>
</div>
CSS: 
#outer #inner {
  width: 970px;
  background-image: url("img/background.png");
  background-repeat: repeat-y;
}
#outer #inner #inner2 {
  background-image: url("img/nav_background.png");
  background-repeat: repeat-y;
  background-position:10px 0;
}
#outer #inner #inner2 #navigation {
  width: 190px;
  float: left;
  margin-left: 10px;
}
#outer #inner #inner2 #content {
  width: 770px;
  float: right;
  background-image: url("img/signet.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}
StyleIE.css
CSS: 
#outer #inner #inner2 #navigation {
  margin-left: 5px;
}


mfg Maik
 
Dankeschön! Werde ich mir mal genauer anschauen.

Ich hatte eigentlich eine Zwischenlösung. Und zwar indem ich gleich für #inner ein Hintergrundbild nehme, das aus einem Hintergrundbild von der #content sowie #navigation besteht.
War eher keine Lösung sondern ein "Überspringen" des Problems.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück