CSS dos divs uno al lado del otro

Quiero poner dos <div>s uno al lado del otro. El derecho <div>es de unos 200 px; y la izquierda <div>debe llenar el resto del ancho de la pantalla? ¿Cómo puedo hacer esto?

Puede usar flexbox para diseñar sus artículos:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Esto es básicamente solo raspar la superficie de flexbox. Flexbox puede hacer cosas bastante sorprendentes.

Para la compatibilidad con navegadores antiguos, puede usar CSS flotante y propiedades de ancho para resolverlo.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

No sé si esto sigue siendo un problema actual o no, pero acabo de encontrar el mismo problema y usé la display: inline-block;etiqueta CSS . Envolviendo estos en un div para que puedan colocarse adecuadamente.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Tenga en cuenta que el uso del atributo de estilo en línea solo se usó para la concisión de este ejemplo, por supuesto, estos se movieron a un archivo CSS externo.

Desafortunadamente, esto no es algo trivial para resolver en el caso general. Lo más fácil sería agregar una propiedad de estilo CSS "float: right;" sin embargo, a su div 200px, esto también haría que su "main" -div sea realmente de ancho completo y cualquier texto allí flote alrededor del borde de la 200px-div, que a menudo se ve raro, dependiendo del contenido (más o menos en todos los casos excepto si es una imagen flotante).

EDITAR: Según lo sugerido por Dom, el problema de envoltura, por supuesto, podría resolverse con un margen. Tonto de mí.

El método sugerido por @roe y @MohitNanda funciona, pero si el div correcto está configurado como float:right;, entonces debe aparecer primero en la fuente HTML. Esto rompe el orden de lectura de izquierda a derecha, lo que podría ser confuso si la página se muestra con estilos desactivados. Si ese es el caso, podría ser mejor usar un contenedor envolvente y posicionamiento absoluto:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Demostrado:

Editar: Hmm, interesante. La ventana de vista previa muestra los divs formateados correctamente, pero el elemento de publicación representado no. Lo siento, entonces tendrás que probarlo por ti mismo.

Me encontré con este problema hoy. Basado en las soluciones anteriores, esto funcionó para mí:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Simplemente haga que el div principal abarque todo el ancho y flote los divs contenidos dentro.

ACTUALIZAR

Si necesita colocar elementos en una fila, puede usar Flex Layout . Aquí tienes otro tutorial de Flex . Es una gran herramienta CSS y, aunque no es 100% compatible, cada día su soporte mejora. Esto funciona tan simple como:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

Y lo que obtienes aquí es un contenedor con un tamaño total de 4 unidades, que comparte el espacio con sus hijos en una relación de 1/4 y 3/4.

He hecho un ejemplo en CodePen que resuelve su problema. Espero que ayude.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

MUY VIEJO

Tal vez esto sea una tontería, pero ¿has probado con una mesa? No utiliza directamente CSS para posicionar los divs, pero funciona bien.

Puede crear una tabla 1x2 y poner su divsinterior, y luego formatear la tabla con CSS para colocarlos como desee:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Nota

Si desea evitar el uso de la tabla, como se dijo anteriormente, puede usar float: left;y float: right;en el siguiente elemento, no olvide agregar un clear: left;, clear: right;o clear: both;para que se limpie la posición.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Esto funcionará bien siempre que establezca clear: bothel elemento que separa este bloque de dos columnas.

Me encontré con el mismo problema y la versión de Mohits funciona. Si desea mantener su orden izquierda-derecha en el html, intente esto. En mi caso, el div izquierdo está ajustando el tamaño, el div derecho permanece en el ancho 260px.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

El truco es usar un relleno derecho en el cuadro principal, pero usar ese espacio nuevamente colocando el cuadro derecho nuevamente con margen derecho.

Yo uso una mezcla de flotador y overflow-x: oculto. Código mínimo, siempre funciona.

https://jsfiddle.net/9934sc4d/4/ - ¡ADEMÁS, no necesitas limpiar tu flotador!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Como todos han señalado, lo hará estableciendo un float:right;en el contenido de RHS y un margen negativo en el LHS.

Sin embargo, si no usa un float: left;en el LHS (como lo hace Mohit), obtendrá un efecto de escalonamiento porque el div LHS seguirá consumiendo el espacio marginal en el diseño.

Sin embargo ... el flotador LHS encogerá el contenido, por lo que necesitará insertar un nodo secundario de ancho definido si eso no es aceptable, en ese momento también podría haber definido el ancho en el elemento primario.

Sin embargo, como señala David, puede cambiar el orden de lectura del marcado para evitar el requisito de flotación de LHS, pero eso tiene problemas de legibilidad y posiblemente de accesibilidad.

Sin embargo, este problema se puede resolver con flotadores con un margen adicional

(advertencia: no apruebo el .clearing div en ese ejemplo, vea aquí para más detalles)

A fin de cuentas, creo que la mayoría de nosotros desearía que hubiera un ancho no codicioso: permanecer en CSS3 ...

Esta no será la respuesta para todos, ya que no es compatible con IE7-, pero podría usarla y luego usar una respuesta alternativa para IE7-. Es display: table, display: table-row y display: table-cell. Tenga en cuenta que esto no es usar tablas para el diseño, sino diseñar divs para que las cosas se alineen bien sin toda la molestia de arriba. La mía es una aplicación html5, por lo que funciona muy bien.

Este artículo muestra un ejemplo: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

Así es como se verá su hoja de estilo:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Parafraseando uno de mis sitios web que hace algo similar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

solo use un índice z y todo se sentirá bien. asegúrese de tener posiciones marcadas como fijas o absolutas. entonces nada se moverá como con una etiqueta flotante.