gefloatete Boxen verdrängen Hintergrund nicht

[Dumbo]

Moin Leute,

ich habe folgende Frage:

Wie schaffe ich es, dass die weiße Hintergrundfarbe auch hinter den gefloateten Boxen dargestellt werden? Ohne content eine feste Höhe zu geben?

  
 <div id="content">  
    <div class="textboxleft"></div>  
    <div class="textboxright"></div>  
</div>  

#content {  
	background:#FFFFFF;  
	width:960px;}  
.textboxleft {  
	float:left;  
	width:450px;  
}  
.textboxright {  
	float:left;  
	width:450px;  
}  
  
}

Vielen Dank schon mal! Falls es dazu schon einen Beitrag gab, nennt ihn mir bitte. Habe nix passendes gefunden.

[suit]

Vielen Dank schon mal! Falls es dazu schon einen Beitrag gab, nennt ihn mir bitte. Habe nix passendes gefunden.

Dein Stichwort ist clearfix - und bevor du diese antike Lösung in der Suchmaschine deiner Wahl findest und verwendest (die zwar die Theorie gut beschreibt, praktisch aber ein paar Haken hat), nutze lieber diese:

#content:after {  
	content: '\00A0';  
	display: block;  
	width: 100%;  
	height: 0;  
	overflow: hidden;  
	clear: both;  
}

[Dumbo]

Was besagt denn der Wert: '\00A0'?

[suit]

Was besagt denn der Wert: '\00A0'?

U+00A0 ist ein geschütztes Leerzeichen - prinzipiell kann da jedes Zeichen stehen - auch ein Punkt (wie in dem Beispiel von positioniseverything) aber unter bestimmten Umständen kann es sein, das dieses Zeichen doch sichtbar wird (oder möglicherweise vorgelesen) - da ist es sicherer eines zu verwenden, welches man auf jeden Fall nicht sehen kann.

[Dumbo]

Man lernt ja nie aus!

Das Problem ist, erzeigt mit immer noch den schwarzen Hintergrund des bodys und nicht den weißen von #content.
Was mache ich falsch?

#content:after {  
        background:#FFFFFF;  
        content: '\00A0';  
        display: block;  
        width: 100%;  
        height: 0;  
        overflow: hidden;  
        clear: both;  
}

[suit]

Was mache ich falsch?

Kann man das live sehen?

[Dumbo]

Hier zu sehen:

http://www.helden-design.de/Aktuell/modulares_system.html

[suit]

http://www.helden-design.de/Aktuell/modulares_system.html

funktioniert einwandfrei, #content hat allerdings keine Hintergrundfarbe die man sehen könnte ;)

btw: konsultiere den W3-Validator - der möchte dir etwas mitteilen.

[Dumbo]

Danke für den W3-Validator-Tip! Manchmal fragt mann sich aber auch - 700?

Und wie bekomme ich es sichtbar?

Besten dank schon mal!

[Dumbo]

Ahh! content:after ist extra! Alles Klar! Vielen Dank!

[suit]

Danke für den W3-Validator-Tip! Manchmal fragt mann sich aber auch - 700?

Folgefehler - allein ein nicht geschlossenes oder ein an einer bestimmten Stelle nicht erlaubtes Element kann schon dutzende Folgefehler produzieren.

Und wie bekomme ich es sichtbar?

Verpass dem Element eine Hintergrundfarbe ;) Groß genug ist es.

[Steel]

Moin!

Das Problem ist, erzeigt mit immer noch den schwarzen Hintergrund des bodys und nicht den weißen von #content.
Was mache ich falsch?

Einen Browser verwenden, der :after nicht versteht?

[Der Martin]

Hallo,

Das Problem ist, erzeigt mit immer noch den schwarzen Hintergrund des bodys und nicht den weißen von #content.
Was mache ich falsch?
Einen Browser verwenden, der :after nicht versteht?

Zitat #277 ;-)
Und genauso wie :before geht ihm natürlich auch :after an demselben vorbei.

*scnr*
 Martin

[suit]

Einen Browser verwenden, der :after nicht versteht?

Das trifft auf den IE zu der es aber ohnehin falsch macht.

[Cheatah]

Hi,

Dein Stichwort ist clearfix

ähm, was spricht dagegen, einfach die overflow-Eigenschaft mit einem von 'visible' verschiedenen Wert zu bestücken?

Cheatah

[suit]

ähm, was spricht dagegen, einfach die overflow-Eigenschaft mit einem von 'visible' verschiedenen Wert zu bestücken?

Weil dann ggf. Inhalt ins Nirvana verschwindet - bei einem mehrspaltigen Layout mit festgelegten Spaltenbreiten ist das kein problem - bei einer variablen Anzahl floatender Elemente mit nicht näher definierten Breiten kann das aber möglicherweise zum Abschneiden von Inhalten führen. Bzw sollte ein Inhalt breiter sein als seine elternspalte, kann er nicht darüber hinauslaufen - ebenso ist es nicht möglich Inhalte "irgendwo" hinzupositionieren - z.B. "Fußnoten" die man neben den eigentlich inhalt ausserhalb des Floatkonstrukts positionieren will.

Das muss man natürlich von Fall zu Fall entscheiden - die clearfix-Lösung mittels :after bietet imho aber die wenigsten Nachteile - der einzige Nachteil ist: ein paar Zeilen mehr CSS ;)

[Cheatah]

Hi,

ähm, was spricht dagegen, einfach die overflow-Eigenschaft mit einem von 'visible' verschiedenen Wert zu bestücken?
Weil dann ggf. Inhalt ins Nirvana verschwindet

den gegebenen Fall gib mir doch bitte mal. Ich könnte wetten, Du hast dem Element feste Dimensionen vergeben.

Cheatah

[suit]

den gegebenen Fall gib mir doch bitte mal. Ich könnte wetten, Du hast dem Element feste Dimensionen vergeben.

Auch das ist manchmal notwendig ;) Wenn z.B. die Inhaltsspalte umrahmt sein soll.