Floating divs try to keep responsive.

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

I am trying to make split divs but should remain inline. I try to avoid using table and give my divs a width so that they stay responsive.

As you can see divs clicking on each other, I want to make them stay inline, like whenever text is short. How can I do it?

Me too https://jsfiddle.net/63s8hadd/

Answer 1

Check this,

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

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

Note. Values ​​inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row and table-row-group not supported in IE7 and earlier. For IE8 required! DOCTYPE IE9 supports values.

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