Question

I’m looking an elegant way to position two divs one besides the other without line wrapping. The first div is an icon the second a text of unknown size.

They should not break in two lines but hide if not enough place. I’m trying with this example, but it doesn’t work.

There is a similar question, but’s it’s not the same scenario as size is unknown.

Help is appreciated

Answer 1

Write like this:

.container {
  white-space: nowrap;
}
.d1,
.d2{
    display: inline-block;
    *display:inline;/*for IE 7 */
    *zoom:1;/*for IE 7 */
    vertical-align:top;
}
.d1 {            
    background-color:#ff0;
}

.d2 {
    background-color:red;
}

Check this http://jsfiddle.net/xcSXA/5/