Akkordeon: Clearing eines gefloateten Bildes

[mpietsch]

Grüß euch,

wird einem Einzelelement eines Akkordeons mit wenig Text-Inhalt ein Bild hinzugefügt und dieses gefloatet, ist ein Clearing erforderlich, damit das gesamt Element auch das Bild ordentlich umschließt. Meine aktuell bevorzugte Lösung ist ein angepasstes Template der Form:

    <?php if (!$this->addBefore): ?>
         ...
    <?php if ($this->addImage): ?>
         ...
    <?php if ($this->addBefore): ?>
         ...
    <?php if ($this->addImage): ?><div class="clearfix"></div><?php endif; ?>

Wisst ihr eine elegantere Lösung?

-- Micha

[melzebub]

Dem Parent ein overflow:hidden verpassen.

[mpietsch]

Das hat -- sofern die bekannten Nachteile vernachlässigt werden können -- in der Tat den Charme, das Template unangetastet zu belassen.

[mpietsch]

Habe mit einem Clearer gearbeitet. "overflow: hidden;" ist angenehm, solange man nicht in die Detail-Probleme läuft, die in bestimmten Szenarien auftreten.

[schman]

Generell gibt es ja mittlerweile elegantere Lösungen fürs clearing ohne HTML Markup.
zB http://h5c3.de/inhalte/float-aufloesen-clearfix/

[mpietsch]

Generell gibt es ja mittlerweile elegantere Lösungen fürs clearing ohne HTML Markup.
zB http://h5c3.de/inhalte/float-aufloesen-clearfix/

Was ist der Unterschied zwischen

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

und der in assets/contao/css/layout-uncompressed.css verwendeten Variante?:

#container:after,.custom:after {
    content:"";
    display:table;
    clear:both;
}

Leider gab es in https://github.com/contao/core/issues/6203 keine weitere Stellungnahme zur Aussage in https://github.com/contao/core/issue...ment-26947594:

.cf:after {
  content:"";
  display:block;
  clear:both;
}

/* IE 6/7 compatibility */
.cf {
    zoom:1;
}

[mpietsch]

@ Moderation: Thema könnte vom CE Akkordeon unabhängig eingeordnet werden.

[schman]

Ich habs mal ins Forum Layout / Template / Holy Grail verschoben.