Dos divs uno además del otro sin envolver

Estoy buscando una manera elegante de colocar dos divisores uno junto al otro sin envoltura de línea. El primer div es un icono, el segundo es un texto de tamaño desconocido.

No deberían romperse en dos líneas sino esconderse si no es suficiente. Estoy intentando con este ejemplo , pero no funciona.

Hay una pregunta similar, pero no es el mismo escenario ya que se desconoce el tamaño.

La ayuda es apreciada

Escribe así:

.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; } 

Mira esto http://jsfiddle.net/xcSXA/5/

En lugar de flotar tus divs, muéstralos como bloque en línea para que no se envuelvan. Además, establezca el estilo de “espacio en blanco” del contenedor en “nowrap” para evitar también el ajuste de línea.

HTML

 
icon
This can be very very very very large.

CSS

 .container { white-space:nowrap; overflow:hidden; width: 100px; } .d1 { display: inline-block; background-color:#ff0; } .d2 { display: inline-block; background-color:red; } 

Ejemplo de trabajo: http://jsfiddle.net/C4Wfa/

1.

float: left no te da, lo que necesitas.
Intenta display: inline

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

Creo que el siguiente CSS es lo que necesitas.

 .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; } 

Puedes intentarlo con

float: left;

y crea una div externa con este estilo:

height: 1%; overflow: hidden;

Vea aquí: http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical /-alternativa a-la-pie-clearfix-hack / y USG = __ NW1NVgWIKW-rBh0Cp60ouDdIGvg = & h = 300 & w = 412 y sz = 6 & hl = es & start = 0 & SIG2 = 4nJ8a7o2JcYBdlBaPaL3VA y zoom = 1 & tbnid = raa9wIX8T8PbWM: & TBNH = 103 y tbnw = 141 y ei = uGlLT9j4MsWEhQfl7eGYBw y prev = / Búsqueda% 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 y tx = 64 y ty = 50

.d1 y .d2 tienes que dar un cierto ancho, pero debes asegurarte de que el ancho de ambos .d1 y .d2 juntos (+ márgenes y rellenos) no es más grande que la clase contenedor, de lo contrario no lo harán poder ser colocado uno al lado del otro.