galleggianti div cercando di mantenere reattivo

Question

#body { 
 
    background-color: rgba(51, 5, 22, 0.5); 
 
    padding: 0.5em; 
 
    overflow: hidden; 
 
} 
 
#category, #mission { 
 
    text-transform: uppercase; 
 
    font-weight:bolder; 
 
    float: left; 
 
} 
 
#mission { 
 
    margin-left: 8em; 
 
} 
 
.category-picked, .mission-picked { 
 
    text-transform: none; 
 
    font-weight: normal; 
 
}

<!-- BODY SECTION START !--> 
 
    <div id="body"> 
 
     <div id="category"> 
 
      <div class="category-header"> 
 
       Category 
 
      </div> 
 
      <div class="category-picked"> 
 
       Random Picked Oneeeeeee 
 
      </div> 
 
     </div> 
 
     <div id="mission"> 
 
      <div class="mission-header"> 
 
       Mission 
 
      </div> 
 
      <div class="mission-picked"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis metus nibh, placerat vitae vehicula eu, lobortis id eros. Nam ac ipsum enim. Cras in elit sed ligula accumsan venenatis. Fusce interdum, nibh eleifend ullamcorper gravida, enim augue tristique orci, a fringilla mi velit sed erat. Sed nulla augue, tempus eu nisl a, tincidunt egestas magna. Mauris non nulla tempus, tincidunt nibh at, scelerisque velit. Mauris vulputate ut odio id ultrices. Fusce et pulvinar metus. Nullam suscipit accumsan libero eu fringilla. Curabitur vulputate eu metus quis dapibus. Etiam dapibus mi eu mi lacinia, id facilisis orci dapibus. Donec vel nisi hendrerit, facilisis quam interdum, facilisis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- BODY SECTION END !--> 
 

Sto cercando di fare un div separati, ma deve essere rimanere in linea. Cerco di evitare di usare table e di dare ai miei div un width per farli rimanere reattivi.

Come vedi i div che si spingono a vicenda, voglio farli rimanere in linea come quando il testo è breve. Come devo fare questo?

Ho anche violino che https://jsfiddle.net/63s8hadd/

Answer 1

check this out,

#body { 
 
    background-color: rgba(51, 5, 22, 0.5); 
 
    padding: 0.5em; 
 
    overflow: hidden; 
 
} 
 
#category, #mission { 
 
    text-transform: uppercase; 
 
    font-weight:bolder; 
 
    /*float: left;*/ 
 
} 
 
#mission { 
 
    /*margin-left: 8em; Why? */ 
 
} 
 
.category-picked, .mission-picked { 
 
    text-transform: none; 
 
    font-weight: normal; 
 
} 
 
.table{ 
 
    display: table; 
 
} 
 
.tr{ 
 
    display: table-row; 
 
    } 
 
.td{ 
 
    display: table-cell 
 
}

<!-- BODY SECTION START !--> 
 
    <div id="body" class="table"> 
 
     <div id="category" class="tr"> 
 
      <div class="category-header td"> 
 
       Category 
 
      </div> 
 
      <div class="category-picked td"> 
 
       Random Picked Oneeeeeee 
 
      </div> 
 
     </div> 
 
     <div id="mission" class="tr"> 
 
      <div class="mission-header td"> 
 
       Mission 
 
      </div> 
 
      <div class="mission-picked td"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis metus nibh, placerat vitae vehicula eu, lobortis id eros. Nam ac ipsum enim. Cras in elit sed ligula accumsan venenatis. Fusce interdum, nibh eleifend ullamcorper gravida, enim augue tristique orci, a fringilla mi velit sed erat. Sed nulla augue, tempus eu nisl a, tincidunt egestas magna. Mauris non nulla tempus, tincidunt nibh at, scelerisque velit. Mauris vulputate ut odio id ultrices. Fusce et pulvinar metus. Nullam suscipit accumsan libero eu fringilla. Curabitur vulputate eu metus quis dapibus. Etiam dapibus mi eu mi lacinia, id facilisis orci dapibus. Donec vel nisi hendrerit, facilisis quam interdum, facilisis dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- BODY SECTION END !--> 
 

violino: https://jsfiddle.net/63s8hadd/1/

Nota: i valori "inline-table", "scheda le "," tabella-didascalia ", " tabella-cella "," tabella-colonna "," tabella-colonna-gruppo "," tabella-riga "e " tabella-riga-gruppo "non sono supportati in IE7 e prima. IE8 richiede un ! DOCTYPE. IE9 supporta i valori.

ref: http://www.w3schools.com/cssref/pr_class_display.asp