2011-07-24 29 views
21

Quiero colocar dos etiquetas DIV una al lado de la otra sin usar ancho fijo. El primer div se expande a su contenido y el segundo div debe llenar el espacio restante. Además, los div no se deben sentar encima del otro div, porque tienen una imagen de fondo transparente, por lo que si se cruzan es evidente. Intenté todas las posibilidades que podía pensar pero no pude encontrar una solución usando etiquetas DIV.dos divs uno al lado del otro, uno ancho del 100% otros depende del contenido

Puedo hacer esto usando una TABLA, pero ¿es posible hacerlo usando DIV? ¿O es esto una cosa más que DIV no puede hacer?

Aquí está el código:

  #right{ 
       background: green;  
       width: 100%; 
      } 
      #left { 
       margin-top: 5px; /* to test if they intersect*/ 
       background: red; 
      } 
      #container { 
       width: 800px; 
      } 
      <div id="container"> 
       <div id="left"> This div is as big as it's content</div> 
       <div id="right"> rest of space</div> 
      </div> 

Gracias por las respuestas!

+0

sí, uso tablas ATM, pero quiero saber si es posible hacerlo con DIV. – blejzz

Respuesta

62

Ver:http://jsfiddle.net/kGpdM/

#left { 
    background: #aaa; 
    float: left 
} 
#right { 
    background: cyan; 
    overflow: hidden 
} 

Esto funciona en todos los navegadores modernos y IE7 +.

La columna de la izquierda será exactamente igual de ancha que el contenido que contiene. La columna de la derecha ocupará el espacio restante.

El overflow: hidden "truco" detrás de esta respuesta es explained here.

+6

Bien hecho. +1 por mostrarme un truco nuevo. –

+0

Todavía no entiendo por qué funciona, pero funciona. ¿Pero podemos confiar confiadamente en que esto continuará funcionando en el futuro? – Vincent

+0

@Vincent: Sí, está garantizado que funcionará en el futuro; el comportamiento está bien definido en algún lugar de las especificaciones de CSS. Otra forma de hacerlo es con 'display: table-cell', [aquí hay un ejemplo] (http://stackoverflow.com/questions/6938900/how-can-i-put-an-input-element-on-the -same-line-as-its-label/6938990 # 6938990). – thirtydot

Cuestiones relacionadas