drei Spalten, die mittlere soll flexibel sein

[Kai(ner)]

Bitte nicht lachen, aber ich verzweifele an dem CSS. Ich versiche krampfhaft drei Spalten hinzubekommen. Die linke und rechte sollen fix sein, und die MItte soll sich dementsprechend anpassen.

Aber ich bekomme ds ganze nicht hin.

Was mache ich den da falsch

.left{background:#000000;float:left;width:250px;}

.middle{background:#ff0000;margin: 0 250px 0 250px;min-height:600px;float:left;display:block}

.right{background:#000000;float:right;width:250px;}

[MrMurphy1]

Hallo

Aber ich bekomme ds ganze nicht hin.

Wer soll mit so einer Fehlerbeschreibung etwas anfangen können? Zumal mit ein paar hingeworfenen Quellcodeschnipseln.

Grundsätzlich solltest du für solche Aufgaben Flexbox oder CSS-Grid verwenden statt float.

Gruss

MrMurphy

[MrMurphy1]

Hallo

Zur Veranschauung ein praktisches Beispiel:

Zu diesem HTML

<article class="beitrag">
   <aside>
      <h2>Schere</h2>
      <p>Text</p>
      <h2>Stein</h2>
      <p>Text</p>
   </aside>
   <section>
      <h2>Schere, Stein, Papier</h2>
      <p>Text</p>
   </section>
   <aside>
      <h2>Papier</h2>
      <p>Text</p>
   </aside>
</article>

könntest du dieses CSS verwenden:

.beitrag {
   display: flex;
}
.beitrag>aside {
   background-color: #000000;
   color: white;
   padding: 1rem;
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 250px;
}
.beitrag>section {
   background-color: #ff0000;
   padding: 1rem;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
}

oder für ein Responsive Design das folgende CSS:

@media all {
   .beitrag>aside {
      background-color: #000000;
      color: white;
      padding: 1rem;
   }
   .beitrag>section {
      background-color: #ff0000;
      padding: 1rem;
   }
}
@media only screen and (min-width: 1000px) {
   .beitrag {
      display: flex;
   }
   .beitrag>aside {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 250px;
   }
   .beitrag>section {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;
   }
}

Ein praktisches Beispiel könnte folgendermaßen ausschauen:

Beispielseite

Gruss

MrMurphy

[marctrix]

Hej Kai(ner),

Ich versiche krampfhaft drei Spalten hinzubekommen. Die linke und rechte sollen fix sein, und die MItte soll sich dementsprechend anpassen.

Aber ich bekomme ds ganze nicht hin.

Was mache ich den da falsch

Floats sind dafür nicht gedacht. Es geht zwar irgendwie, aber dann muss man verschachteln und das ganze ist eh nur ein Hack aus Zeiten, als es noch keine explizite Layout-Technik für Spalten (Flexbox) und Raster (Grid) gab.

Übrigens gibt es keine rechten oder linken Spalten. Dafür reicht der Platz auf den meisten Geräten (also Smartphones) gar nicht. Daher macht es keinen Sinn, die so zu nennen 😉 Besser: nenne die Klassen entsprechend dem Sinn der Container, also nav ( gibt dafür ein extra Element, Klassen hierfür wahrscheinlich nicht nötig), Main (ebenso) und weiterführende Informationen (das Element dafür nennt sich aside)…

Marc