Linke DIV-Breite abhängig von rechte DIV-Breite gestalten

pega

Hallo
ich möchte ein Layout gestalten, bei dem 2 DIVs (bzw. Fieldsets) nebeneinanderliegen. Das rechte Fieldset besitzt mehrere Comboboxen, bei denen 2 Comboboxen ein nebeneinanderliegendes Paar bilden. Es gibt 3...5 untereinander angeordnete Paare. Die linken und rechten Comboboxen haben jeweils den gleichen Inhalt, dieser fällt abhängig vom Seitenaufruf per php unterschiedlich aus. Somit ist ein Comboboxenpaar und damit das rechte Fieldset abhängig vom Seitenaufruf unterschiedlich breit.

Das linke Fieldset soll eine Breite einnehmen, die den Container mit dem rechten Fieldset zu 100% in der Breite füllt.

Mit meinem bisherigen Versuchen kriege ich diese Varianz nicht hin, meinen letzten Versuch hab ich mit beigefügtem HTML-Code beendet.
PS: Idealerweise soll das rechte Fieldset nach Unterschreiten einer Mindestbreite unterhalb des linken FS positioniert sein, das linke dann 100% Seitenbreite bekommen (responsive). Aber erstmal das 1. Problem lösen.

Kann mit jemand einen Lösungshinweis geben?
Merci Peter

HTML

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"><!--
        .eingabe {
            float:left;
            width:60%;
            }
        .einstellungen {
            float:right;
            margin-left:10px;
            }
        fieldset {
            padding: 10px 15px 10px 10px;
            background-color: #FFF8DC;
            }
        textarea { width: 100%;}
        --></style>
    </head>


<body style="background-color:#eee;">
<div id="container" style="width:760px; margin:0px auto; padding:10px; background-color: #E6E6FA;">


    <fieldset class="eingabe"><legend>Eingabe</legend>
        <textarea id="input" rows="6">Das ist ein Text, der sehr lang sein kann.</textarea><br>
    </fieldset>


    <fieldset class="einstellungen"><legend>Einstellungen</legend>
        <div class="einstellung">
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
        <div class="einstellung">
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
        <div class="einstellung">
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
    </fieldset>
</div>
</body>
</html>
<!-- Zum Austesten, stattdessen 3x diese Combos nehmen. Bei Fieldsets müssen weiterhin auf einer Höhe liegen.
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
-->

Alles anzeigen

djheke

Meinst Du soo?!

HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Test</title>
<style>


#container {
 display:flex;
}


fieldset:nth-of-type(1),
fieldset:nth-of-type(2) {
 flex-basis:50%;
}


textarea { width: 100%;}


div {
 display:flex;
}


div select:nth-of-type(1) {
 flex-basis:80%;
}
div select:nth-of-type(2) {
 flex-basis:20%;
}


@media screen and (max-width: 680px) {  
 #container { flex-direction:column;}
}
</style>
</head>


<body>
<div id="container">


    <fieldset><legend>Eingabe</legend>
        <textarea id="input" rows="6">Das ist ein Text, der sehr lang sein kann.</textarea><br>
    </fieldset>


    <fieldset><legend>Einstellungen</legend>
         <div>
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
         </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
        </div>
        <div>
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
         </div>
         <div>
          <select size="1">
            <option>Lorum </option>
            <option>Lorum ipsum</option>
          </select>
          <select size="1">
            <option selected>Lo</option>
            <option>Ips</option>
          </select>
         </div>
    </fieldset>


</div><!--/container-->
</body>
</html>

Alles anzeigen

pega

Leider nur fast richtig. Dein Vorschlag wäre aber zumindest die 2.beste Lösung.

Die rechte Div soll nur so breit werden, wie es erforderlich ist (also abhängig von der Breite eines Comboboxpaares) Damit ist diese auch fix allerdings mit einer unbekannten Breite. Die jetzt noch freie Breite -links innerhalb des Containers- soll dann durch die linke Div (mit dem Textfeld) eingenommen werden.

Ich möchte letztlich dem Textfeld den maximal möglichen Raum geben und dabei rechts vom Textfeld einige Einstellmöglichkeiten platzieren. Eine Änderung der Seitenbreite soll also nur Einfluss auf die Breite des Textfelds haben, die Einstellmöglichkeiten (Comboxen) sollen unverändert bleiben.

Was bei deinem Vorschlag wunschgemäß funktioniert ist die Responsibility, dass also nach Unterschreiten einer Mindestbreite die Comboboxen nach unten rutschen.

pega

Ich habe die Lösung gefunden. Mit der flex-Angabe hast du mich auf die Spur gebracht.

HTML

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css"><!--
        .container{
            display: flex;
            flex-flow: row wrap;
            }
        .eingabe {flex: auto;}
        .einstellungen {}


        fieldset {background-color: #FFF8DC;}
        textarea { width: 100%;}
        --></style>
    </head>


<body style="background-color:#eee;">


<div class="container" style="width:70%; margin:0px auto; padding:10px; background-color: #E6E6FA;">


    <fieldset class="eingabe"><label>Eingabe</label>
        <textarea id="input" rows="6">Das ist ein Text, der sehr lang sein kann.</textarea><br>
    </fieldset>


    <fieldset class="einstellungen"><label>Einstellungen</label>
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
    <div class="einstellung">
      <select size="1">
        <option>Lorum ipsum </option>
        <option>Lorum ipsum dipsum</option>
      </select>
      <select size="1">
        <option selected>Lorum</option>
        <option>Ips</option>
      </select>
    </div>
    </fieldset>


</div>


</body></html>

Alles anzeigen

Tags