Two divs one besides the other without wrapping - css

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.

Answer 5

I think, the following CSS is, what you need.
.container {
display:inline-block;
overflow:hidden;
white-space: nowrap;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
white-space: nowrap;
display: inline-block;
background-color:red;
}

Answer 6

You can try it with
float: left;
and create an outer div with this style:
height: 1%; overflow: hidden;
See here: http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50