Css How To Force Divs Side By Side With Text Overflow?

I need force 2 divs side by side as it below in example : #colwrap{ overflow:hidden; background-color: orange; width:300px; } #colLeft { height: 48px; white-spac

Solution 1:

you can use flex-box to achieve this. check this pen out: http://codepen.io/anon/pen/aOExbb

I just modified your css a bit:

#colwrap{
  overflow:hidden;
  background-color: orange;
  width:300px;
  display:flex;
  flex-flow:row;
  justify-content:flex-start;
}
#colLeft {
  height: 48px;  
  white-space: nowrap;    
  overflow: hidden;
  text-overflow: ellipsis;
}
#colRight {
  order:2;
  background-color: #c3d0ff;
  height: 48px;
  float: right;
}

and here is a guide to flex-box