2011-08-23 33 views
5

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.CSS - Flotante de dos elementos uno al lado del otro

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

Respuesta

4
<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.

+0

El contenido del div en el lado izquierdo varía. Entonces no puedo especificar el ancho. –

+0

@ dev.e.loper: no necesita especificar un 'ancho'. – thirtydot

+0

Me refiero a #divB en mi código (pero parece que no es necesario: http://www.w3.org/TR/CSS2/visudet.html#float-width) – MatTheCat

1

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; 
} 
+0

Sin embargo, lo siguiente funciona si hay un problema si divA tiene mucho texto. Un div entra en otro. http://jsfiddle.net/RALza/16/ –

1

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>

Cuestiones relacionadas