Div Containern gleiche Zeilenhöhe über CSS geben

[majas]

Hallo,

ich folgende div Container:

div style="min-height: 50px;">
                <div class="left" style="vertical-align: top; width: 27%; float: left;">Anwesend:</div>
                <div class="right" style="vertical-align: top; width: 73%; float: right;">TÄGLICH</div>
                <div class="clearfix"></div>
</div>

Nun sollen beide automatisch die gleiche Höhe bekommen, da im ersten Container immer nur "Anwesend" steht und immer zweiten Container bis zu 5 Zeilen stehen können

Habe schon min-height und max-heigt ausprobiert aber das verändert die Höhe des ersten Containers nicht wenn im zweiten mehr steht

Wer kann mir denn einen Tipp geben

Danke und Gruß Andy

[hausl]

Schau mal hier: http://jsfiddle.net/w5ELr/
Nutzt das HTML5 Box-Modell: https://www.google.at/search?q=html+5+div+same+height

Sonst noch "faux colums" als Suchbegriff.

[majas]

Da das ganze eine mobile Seite wird habe ich mal den ersten Link ausprobiert, funktioniert aber mit Google Chrome nicht

<div class="box">
      <div class="column1">
          a
      </div>
      <div class="column2">
         a<br>b<br>c<br>d<br>e
      </div>
   </div><div class="box">
      <div class="column1">
          a
      </div>
      <div class="column2">
         a<br>b<br>c<br>d<br>e
      </div>
   </div>

Das CSS dazu

.box {
    width:100px;
    display:box;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
     /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /* W3C */
    display:box;
    box-orient:horizontal;
}

.box .column1 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: yellow;
}

.box .column2 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: green;
}

Bei Chrome und Safari wird nur ein weisses Feld angezeigt

Aktuelle Chrome Version Android und IOS 9.1

[majas]

OK ersten Fehler gefunden es existierte schon ein Style mit Box

Das einzige was jetzt nicht mehr funzt ist die Breitendefinition Column 1 27% und 2 73%

Der CSS Style reagiert auf gar nichts mehr (width, min-width und !important) mag er auch nicht.

Wie kann ich denn jetzt die Breite der 2 Container definieren ???

[MrMurphy]

Hallo

 
 display:box;

Die Syntax ist veraltet und sollte nicht mehr verwendet werden. Siehe zum Beispiel

http://blog.kulturbanause.de/2013/07...odell-von-css/

OK ersten Fehler gefunden es existierte schon ein Style mit Box

Wenn du Beispiellösungen bekommst musst du dafür sorgen, dass die von keinen anderen CSS-Anweisungen überschrieben werden.

Für dein Beispiel-HTML benötigst du eigentlich nur das folgende CSS

.box {
   width: 100px;
   display: flex;
}
.box .column1 {
   background-color: yellow;
   width: 27%;
}
.box .column2 {
   background-color: green;
   width: 73%;
}

Gruss

MrMurphy