CSS - Due elementi mobili uno accanto all'altro

Question

Ho due div affiancati. Voglio div che è sul lato sinistro per occupare tutto lo spazio necessario senza spingere l'altro div (a destra) alla riga successiva.

Ecco quello che ho in questo 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; 
} 

funzionerà.

Tuttavia, è necessario specificare la larghezza degli elementi mobili.

Answer 2

Prova questa violino: http://jsfiddle.net/RALza/6/

Funziona cambiando l'ordine dei due div e fare la prima div un elemento di blocco normale senza un galleggiante.

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

e

#divA 
{ 
    border:1px solid blue; 
} 

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

Answer 3

È possibile utilizzare CSS scatole flessibili:

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

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