Problem mit 2 verschachtelten floats [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

Archiv verlassen und diese Seite im Standarddesign anzeigen :
Problem mit 2 verschachtelten floats

dduton

17-02-2010, 17:06

Hallo,

Ich habe Links ein div (Menu) welches nach links gefloatet ist. Rechts davon befindet sich ein Content div. Diese Struktur ist fix durch das Template definiert, und sollte wenn möglich nicht geändert werden.

Im Content Div habe ich nun ein Header div und ein Footer div. Zwischen beiden befinden sich 2 divs (2 Kolonnen) die "float: left" als eigenschaft besitzen.

Nun zu meinem Problem:
Damit das Footer div unter die Beiden Kolonnen rutscht, habe ich ein "clear:both" eingesetzt. Das Problem ist nun dass nun nicht nur die beiden Kolonnen, sondern auch das Menu div mit gecleared wird, und so das Footer div mit unter das Menu rutscht. Es sollte sich eigendlich direkt unter den Beiden Kolonnen befinden.

Tabelle wollte ich vermeiden. Ausser es sei nicht anders zu lösen.

Hier mal Beispiel HTML was mein Problem wiederspiegelt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.1 Template</title>
</head>
<body>


<div style="float: left; width: 100px; background-color: #F00;">
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
</div>


<div style="background-color: #F39; margin: 10px; margin-left: 120px;">


<div style="background-color: #0F0; margin: 10px;">
Header
</div>


<div style="float: left; width: 40%; background-color: #999; margin: 10px;">
Col1
</div>
<div style="float: left; width: 40%; background-color: #CCC; margin: 10px;">
Col2<br />
Col2<br />
Col2<br />
</div>


<div style="background-color: #0FF; clear: both; margin: 10px;">
Footer
</div>

</div>

</body>
</html>

Würde mich auf eine Lösung des Problems freuen.

MfG
Daniel

AmicaNoctis

17-02-2010, 17:11

Hallo,

Floats kann man zwar verschachteln, aber ein clear wirkt sich immer auf alle Floats aus, daher ist es generell keine gute Idee, mit verschachtelten Floats zu arbeiten.

Gruß,

Amica

dduton

17-02-2010, 18:02

Danke für die schnelle Antwort.

Welche Möglichkeiten bleiben mir?

Ich könnte das "Header-Kolonnen-Footer" Konstrukt in eine Tabelle setzen. Glaube aber nicht dass dies eine sehr elegante Lösung ist, oder? Lasse mich gerne eines Besseren belehren ;).

Daniel

AmicaNoctis

17-02-2010, 18:07

Nein, mit Tabellen wollen wir gar nicht wieder anfangen. ;)

Hättest du ein Problem mit absoluter Positionierung? Wenn nicht kannst du das damit prima erledigen.

Edit: wenn der Footer breit genug ist, rutscht er sowieso runter und muss nicht gecleart werden. Hast du es schon so versucht?

dduton

17-02-2010, 18:13

Ok gerne, weiss allerdings nicht wie ich das angehen soll.

Die gesamte Breite der Seite ist dynamisch (passt sich an Fenstergrösse an).
Die höhe der beiden Kolonnen sollte sich dem Inhalt anpassen.

Genau dort würde ich dann Probleme mit der absoluten Positionierung bekommen, oder? Ich verliere ja die Information, wie breit das Content div gerade ist.

Daniel

Kropff

17-02-2010, 18:17

Such mal nach liquid columns. Das sollte dein Problem beheben.

Peter

dduton

17-02-2010, 18:28

Schaue mir das jetzt genauer an.
Melde mich Morgen zurück.

Vielen Dank erst mal :)

Daniel

AmicaNoctis

17-02-2010, 18:41

Genau dort würde ich dann Probleme mit der absoluten Positionierung bekommen, oder?

Eigentlich nicht. Absolute Positionierung kann man auch prozentual angeben. Das Wort "absolut" heißt in dem Falle nur, dass sich das Element nicht mehr im Flow befindet, sondern vom Designer frei positioniert werden kann.

wahsaga

17-02-2010, 19:40

Floats kann man zwar verschachteln, aber ein clear wirkt sich immer auf alle Floats aus
Nein, nicht auf floats in anderen block formatting contexts.

dduton

17-02-2010, 21:08

@wahsaga:
Habe jetzt mal "Block Formatting Context" nachgeschlagen.
Und bin dann auf diese Seite gestossen klick (http://www.communitymx.com/content/article.cfm?page=1&cid=6BC9D).
Um einen neuen "Block Formatting Context" zu starten muss man also ein bestimmtes Attribut setzen. Habe meinem Content div jetzt das "overflow: auto" hinzugefügt und tada es funktioniert.

Hier die finale Lösung:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.1 Template</title>
</head>
<body>


<div style="float: left; width: 100px; background-color: #F00;">
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
Left Col<br />
</div>


<div style="background-color: #F39; margin: 10px; margin-left: 120px; overflow: auto;">


<div style="background-color: #0F0; margin: 10px;">
Header
</div>


<div style="float: left; width: 40%; background-color: #999; margin: 10px;">
Col1
</div>
<div style="float: left; width: 40%; background-color: #CCC; margin: 10px;">
Col2<br />
Col2<br />
Col2<br />
</div>


<div style="background-color: #0FF; clear: both; margin: 10px;">
Footer
</div>

</div>

</body>
</html>

@Kropff:
Die "Fluid Columns" werde ich mir aber auch noch anschauen, man kann nur dazulernen ;)

@AmicaNoctis:
Stimmt, prozentual würde eventuell funktionieren. Habs jetzt mit "overflow: auto" gelöst.

Ich bedanke mich nochmal an alle die mir geholfen haben.

Daniel

- -