CSS - Flotante de dos elementos uno al lado del otro

Question

Tengo dos divs uno al lado del otro. Quiero div que esté en el lado izquierdo para ocupar todo el espacio que necesite sin empujar el otro div (a la derecha) a la siguiente línea.

Aquí es lo que tengo en este momento: http://jsfiddle.net/RALza/

HTML

<div id="container"> 
    <div id="divA"> left text </div> 
    <div id="divB"> right text </div> 
</div> 

CSS

#divA 
{ 
    float:left; 
    border:1px solid blue; 
    width:100%; 
} 

#divB 
{ 
    float:right; 
    border:1px solid red; 
} 

Answer 1

<div id="container"> 
    <div id="divB"> right text </div> 
    <div id="divA"> left text </div> 
</div> 

#divA 
{ 
    overflow:auto; 
    border:1px solid blue; 
} 

#divB 
{ 
    float:right; 
    border:1px solid red; 
} 

va a funcionar.

Pero debe especificar el ancho de los elementos flotantes.

Answer 2

probar este violín: http://jsfiddle.net/RALza/6/

Funciona cambiando el orden de los dos divs y haciendo que la primera div un elemento de bloque normal sin un flotador.

<div id="container"> 
    <div id="divB"> right text </div> 
    <div id="divA"> left text </div> 
</div> 

y

#divA 
{ 
    border:1px solid blue; 
} 

#divB 
{ 
    float:right; 
    border:1px solid red; 
} 

Answer 3

Puede utilizar cajas flexibles CSS:

#container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<div id="container"> 
 
    <div id="divA">left text</div> 
 
    <div id="divB">right text</div> 
 
</div>