CONTAO 5.3, css, 2 div nebeneinander

[mv-soft]

Hallo,


2 DIV Container sind nebeneinander in 1 Zeile

- Zeile hat max. 1000px Breite
- DIV 1 hat fixe Breite von 400px
- DIV 2 hat variable Breite (den kompletten Restplatz)


Wird das Browerfenster kleiner als 1000px, soll DIV 1 immer fix bleiben, DIV 2 immer den verbleibenden Platz komplett einnehmen.

Habe verschiedenes versucht, auch mit flexbox, aber noch keine Lösung gefunden.



Vielen Dank für Hinweise.

[zoglo]

Hallo,


2 DIV Container sind nebeneinander in 1 Zeile

- Zeile hat max. 1000px Breite
- DIV 1 hat fixe Breite von 400px
- DIV 2 hat variable Breite (den kompletten Restplatz)


Wird das Browerfenster kleiner als 1000px, soll DIV 1 immer fix bleiben, DIV 2 immer den verbleibenden Platz komplett einnehmen.

Habe verschiedenes versucht, auch mit flexbox, aber noch keine Lösung gefunden.



Vielen Dank für Hinweise.

Poste einen Link zur Seite oder...
Wenn das nicht möglich ist, am einfachsten machst du es uns mit einem CodePen

[mlweb]

Sollte sowohl mit Flexbox als auch mit Grid gehen. Irgendwann wird Dein zweites Div aber zu schmal werden.
Wenn es bei Dir nicht funktioniert hat war entweder Dein Code nicht tauglich für Dein Vorhaben oder etwas anderes spielt mit rein. Deshalb wie @zoglo schon sagte poste einen Link zur Seite.
Alternativ poste wenigsten Deinen Code, der nicht funktioniert hat.

[zoglo]

Irgendwann wird Dein zweites Div aber zu schmal werden.

Das wird mv-soft als Webentwickler im Jahr 2024 (bald 2025) schon wissen https://www.mv-soft.de/.

Daher frage ich hier nach einem CodePen oder der Website.
Es scheint komplizierter zu sein, als etwas, was mv-soft einfach lösen könnte - sonst hätte man nicht hier danach gefragt

[derRenner]

verstehe ich das richtig was du benötigst?

<div class="container">
  <div class="fixed">DIV 1 (fix 400px)</div>
  <div class="flexible">DIV 2 (variable Breite)</div>
</div>

.container {
  display: flex;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto; /* Zentriert die Zeile bei großen Bildschirmen */
}

.fixed {
  width: 400px; /* Feste Breite */
  background-color: lightblue; /* Optional: Zur Visualisierung */
}

.flexible {
  flex: 1; /* Nimmt den verbleibenden Platz ein */
  background-color: lightgreen; /* Optional: Zur Visualisierung */
}

wie Maren jedoch schon beschreibt ... irgenwann wird die 2.Spalte zu schmal » @media() wäre dann hierzu dein Freund

[mv-soft]

Vielen Dank für die Antworten.


Der Beispiel- Code von 'derRenner' war exakt zutreffend,