2 divs alineados uno al lado del otro, cómo hacer un ancho de relleno div correcto 100%?

Question

Me pregunto cuál es la mejor manera de ir haciendo esto es ...

tengo 3 div s:

• un div#container con width=100%; que contiene 2 interno div s

• a div#inner_left con width cambiando dinámicamente, pero no más ancho que 200px (mantendrá una imagen del producto)

• un div#inner_right donde el ancho debe llenar el resto del espacio en el recipiente (contendrá texto para describir el producto mostrado)

  #container { 
      width:100% 
  } 
  
  #inner_left { 
      display:inline-block: 
      max-width:200px; 
  } 
  
  #inner_right { 
      display:inline-block; 
      width:100%; 
  } 
  

El problema es que la div#inner_right crea un salto de línea y llena la totalidad anchura. ¿Cómo puedo hacer que se alineen uno al lado del otro, con el div derecho que representa el ancho tomado por el div izquierdo (que cambia dinámicamente?). He conseguido esto para trabajar de otras maneras, pero estoy buscando una solución limpia ...

¡Cualquier ayuda para un novato de CSS es muy apreciada!

Answer 1

Tenga una mirada en "liquid layouts" se puede describir lo que estás hablando.

Probablemente estés buscando this one.

En su ejemplo, intente configurar su pantalla en línea. Sin embargo, técnicamente no podrá usar elementos de nivel de bloque, así que eche un vistazo a los enlaces que publiqué anteriormente. :)

El problema de establecer el ancho al 100% si está utilizando flotadores es que se considera el 100% del contenedor, por lo que tampoco funcionará ya que el 100% incluye el ancho del div izquierdo.

Editar: Here es el ejemplo de la otra respuesta, he editado para incluir el HTML/CSS del sitio de ejemplo anterior por razones de simplicidad.

También incluiré a continuación:

HTML

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div class="innertube"><b>Content Column: <em>Fluid</em></b></div> 
    </div> 
</div> 
<div id="leftcolumn"> 
    <div class="innertube"><b>Left Column: <em>200px</em></b></div> 
</div> 

CSS

#contentwrapper{ 
float: left; 
width: 100%; 
} 

#contentcolumn{ 
margin-left: 200px; /*Set left margin to LeftColumnWidth*/ 
} 

#leftcolumn{ 
float: left; 
width: 200px; /*Width of left column*/ 
margin-left: -100%; 
background: #C8FC98; 
} 

Answer 2

Uso flotante:

#container{ 
width:100% 
} 

#inner_left{ 
float:left; 
max-width:200px; 
} 

#inner_right{ 
float:left; 
width:100%; 
} 

Editar: Tiene una lectura de un presente, que es un poco de Niza: quirksmode

Answer 3

que necesita para proporcionar la posición: las propiedades de estilo absoluta tanto a su div de

Answer 4

Así que aunque quería hacer esto solo con CSS, terminé usando tablas ...

Answer 5

Realmente no he visto una buena solución en las respuestas aquí. Así que compartiré el mío.

La mejor manera de hacerlo es mediante el uso de la opción table-cell en CSS. Una cosa importante para agregar es un "ancho mínimo" para el elemento que tiene un ancho de píxel.

Ejemplo:

<div id="left"> 
    Left 
</div> 
<div id="right"> 
    right 
</div> 

CSS:

#left { 
    display: table-cell; 
    min-width: 160px; 
} 
#right { 
    display: table-cell; 
    width: 100%; 
    vertical-align: top; 
} 

Answer 6

Esto se basa en la respuesta @ W00 's. +1 amigo

Mi situación fue cuando quería mostrar un par de iconos junto a una etiqueta. Utilizo la clase de fluido para aquello que es donde entra el nowrap. Esto es para que los íconos aparezcan en la misma línea.

.sidebyside-left-fixed, .sidebyside-right-fixed 
{ 
    display: table-cell; 
    width: 100%; 
} 

.sidebyside-left-fluid , .sidebyside-right-fluid 
{ 
    display: table-cell; 
    vertical-align: top; 
    white-space: nowrap; 
} 

Answer 7

Esto se puede lograr usando Flex-Box, que se ha introducido con CSS3 y de acuerdo con Can I use es transversal navegador.

.container { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    width: 100px; /* or leave it undefined */ 
 
} 
 

 
.right { 
 
    flex-grow: 1; 
 
} 
 

 
/* some styling */ 
 
.container {height: 90vh} 
 
.left {background: gray} 
 
.right {background: red}

<div class="container"> 
 

 
    <div class="left">100px</div> 
 
    <div class="right">Rest</div> 
 
    
 
</div>

Answer 8

Aquí es un método fácil para lograr esto, y esto es algo que es bastante frecuencia necesaria. También se ha probado que funciona con todos los navegadores, incluidos los muy antiguos (avíseme si no aparece en ninguno).

Enlace a una muestra: https://jsfiddle.net/collinsethans/jdgduw6a/

Aquí está la parte HTML:

<div class="wrapper"> 
    <div class="left"> 
     Left Box 
    </div> 

    <div class="right"> 
     Right Box 
    </div> 

</div> 

Y el SCSS correspondiente:

.wrapper { 
    position: relative; 
} 

$left_width: 200px; 
.left { 
    position: absolute; 
    left: 0px; 
    width: $left_width; 
} 
.right { 
    margin-left: $left_width; 
} 

Si no está utilizando ningún preprocesadores CSS, vuelva a colocar la $ left_width con su valor (200px aquí).

Crédito: Esto se basa en http://htmldog.com/examples/pagelayout2/. Hay varios otros útiles allí.