Login

#1 (**permalink**) 17-02-2010, 16: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.

PHP-Code:


			
<!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>



<!-- Menu -->

<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>



<!-- Content -->

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



<!-- Header -->

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

    Header

</div>



<!-- 2 Kolonnen -->

<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>



<!-- Footer -->

<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

#2 (**permalink**) 17-02-2010, 16: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

#3 (**permalink**) 17-02-2010, 17: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

#4 (**permalink**) 17-02-2010, 17: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?

#5 (**permalink**) 17-02-2010, 17: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

#6 (**permalink**) 17-02-2010, 17:17

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

Peter

#7 (**permalink**) 17-02-2010, 17:28

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

Vielen Dank erst mal

Daniel

#8 (**permalink**) 17-02-2010, 17:41

Zitat:

Zitat von dduton

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.

#9 (**permalink**) 17-02-2010, 18:40

Zitat:

Zitat von AmicaNoctis

Floats kann man zwar verschachteln, aber ein clear wirkt sich immer auf alle Floats aus

Nein, nicht auf floats in anderen block formatting contexts.

#10 (**permalink**) 17-02-2010, 20:08

@wahsaga:
Habe jetzt mal "Block Formatting Context" nachgeschlagen.
Und bin dann auf diese Seite gestossen klick.
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:

PHP-Code:


			
<!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>

<!-- Menu -->
<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>

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

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

<!-- 2 Kolonnen -->
<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>

<!-- Footer -->
<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

Login

PHP News

Aktuelle PHP Scripte