Pływające DIV starając się czuły

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 !--> 
 

Staram się zrobić oddzielone div ale należy zatrzymać się na rolkach. Staram się unikać korzystania z table i dać moim divs width, aby były responsywne.

Jak widać, pchniące się divy chcą, aby pozostały w linii, gdy tekst jest krótki. Jak muszę to zrobić?

ja też bawić to https://jsfiddle.net/63s8hadd/

Answer 1

to sprawdzić,

#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 !--> 
 

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

Uwaga: Wartości "inline-table" "patka le "," table-caption ", " table-cell "," table-column "," table-column-group "," table-row "i " table-row-group "nie są obsługiwane w IE7 i wcześniej. IE8 wymaga ! DOCTYPE. IE9 obsługuje wartości.

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