erste Experimente mit Grid im Wiki

[Matthias Apsel]

Hallo alle,

ich probiere mich gerade mal an grid. In der problematischen Seite gibt es folgende Struktur.

<div id="mw-content-text">
  <div>mit hellblauem Hintergrund</div>
  <div class="tocright">aside</div>
</div>

Ich würde gern die beiden Kinder nebeneinander anordnen, so als ob (bei getauschter Reihenfolge) das zweite div-Element rechts gefloatet wäre, nur eben hübscher. Jedoch halten sich die beiden divs nicht an die Breite von ihrem Elternelement.

Wie kann ich das erreichen?

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

<div id="mw-content-text">
  <div>mit hellblauem Hintergrund</div>
  <div class="tocright">aside</div>
</div>

Ich würde gern die beiden Kinder nebeneinander anordnen, so als ob (bei getauschter Reihenfolge) das zweite div-Element rechts gefloatet wäre, nur eben hübscher. Jedoch halten sich die beiden divs nicht an die Breite von ihrem Elternelement.

Wie kann ich das erreichen?

Wenn ich dich richtig verstanden habe, dann mit

#mw-content-text {
  display: grid;
  grid-template-columns: auto auto;
}

Das sähe dann so aus:

LG,
CK

[Matthias Apsel]

Hallo Christian Kruse,

Wenn ich dich richtig verstanden habe, dann mit

#mw-content-text {
  display: grid;
  grid-template-columns: auto auto;
}

Ja, genauso habe ich auch angefangen.

Das sähe dann so aus:

Aber dann kann man genau das beschriebene Verhalten sehen: Besonders deutlich, wenn man statt des Hintergrund einen Rahmen zur verdeutlichung nutzt.

Im Vergleich der Screenshots sieht man, dass die Ursache in meinem User-CSS zu suchen ist. Da muss ich da mal auf die Suche gehen:

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Im Vergleich der Screenshots sieht man, dass die Ursache in meinem User-CSS zu suchen ist. Da muss ich da mal auf die Suche gehen:

Es liegt an

.note-box-example-code {
  width: 65em;
}

Das wiederum steht in diesem User-CSS für ein weniger breites Wiki und dezentere Beispiele mit dem Ziel, dafür zu sorgen, dass die Beispielecodes nur in wenigen Fällen umbrechen (das #content { max-width: 35em; } habe ich vorsorglich auskommentiert).

Welche Möglichkeiten gäbe es denn noch, den Beispielcodes eine größere (meinetwegen auch die gesamte verfügbare) Breite zur Verfügung zu stellen?

Bis demnächst
Matthias