Two divs one besides the other without wrapping

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/

Answer 2

float: left does not give you, what you need.
Try display: inline

http://jsfiddle.net/xcSXA/3/

Answer 3

Instead of floating your divs, display them as inline-block so they don't wrap. Also, set the container's "white-space" style to "nowrap" to also prevent line wrapping.

HTML

<div class="container">
    <div class="d1">icon</div>
    <div class="d2">This can be very very very very large.</div>
</div>

CSS

.container {
  white-space:nowrap;
  overflow:hidden;
  width: 100px;
}

.d1 {
    display: inline-block;
    background-color:#ff0;
}

.d2 {
    display: inline-block;
    background-color:red;
}

Working Example: http://jsfiddle.net/C4Wfa/

​

Answer 4

.d1 and .d2 you have to give a certain width, but you gotta make sure that the width of both .d1 and .d2 together (+ margins and paddings) isn't bigger then the the container class, else they won't be able to be set next to each other.