Akkordeon: Clearing eines gefloateten Bildes

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:

Code:

---

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

Dem Parent ein overflow:hidden verpassen.

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

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

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

Zitat:

---

Zitat von schman

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

Code:

---

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

---

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

Code:

---

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

Code:

---

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

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

---

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

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