html - template - tutorial css

CSS dos divs uno al lado del otro

Question

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

Answer 1

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

Sin embargo ... si no usas un float: left; en el LHS (como lo hace Mohit) entonces obtendrás un efecto paso a paso porque la división de LHS seguirá consumiendo el espacio del margen en el diseño.

Sin embargo ... el flotador de LHS encogerá y encogerá el contenido, por lo que deberá insertar un nodo de niño de ancho definido si eso no es aceptable, en cuyo punto también puede haber definido el ancho en el elemento primario.

Sin embargo, como David señala, 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 puede solved con flotadores dado un marcado adicional

(advertencia: no apruebo el div .cearing en ese ejemplo, consulte here para obtener más información)

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

Answer 2

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;" a su div 200px, sin embargo, esto también causaría que su "main" -div sea realmente de ancho completo y cualquier texto allí flotaría 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 la envoltura, por supuesto, podría resolverse con un margen. Tonto de mí.

Answer 3

El método sugerido por @roe y @MohitNanda funciona, pero si el div correcto se establece 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 los estilos desactivados. Si ese es el caso, podría ser mejor usar un div envoltorio y un 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:

izquierda derecha

Edit: hmm, interesante. La ventana de vista previa muestra los divs correctamente formateados, pero el elemento de publicación renderizado no lo hace. Perdón entonces, tendrás que probarlo por ti mismo.

Answer 4

Esta no será la respuesta para todos, ya que no es compatible con IE7, pero puede 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 estilos de divs para que las cosas se alineen bien sin todos los problemas 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/

Aquí es cómo se verá tu hoja de estilo:

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

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

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

Answer 5

Me encontré con el mismo problema y la versión de Mohits funciona. Si desea mantener su orden de izquierda a 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 de nuevo colocando el cuadro de la derecha nuevamente con el margen derecho.

Answer 6

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 padre abarque todo el ancho y flote los divs que contiene.

Answer 7

No sé si esto sigue siendo un problema actual o no, pero acabo de encontrar el mismo problema y usé la display: inline-block; CSS display: inline-block; etiqueta. Envolviéndolos en un div para que puedan posicionarse 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 precisión de este ejemplo, por supuesto, estos utilizados se moverán a un archivo CSS externo.

Answer 8

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>

Answer 9

Puedes usar flexbox para diseñar tus 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, simplemente raspar la superficie de flexbox. Flexbox puede hacer cosas bastante sorprendentes.

Para la compatibilidad con navegadores más antiguos, puedes usar CSS float y un ancho de propiedades 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>

Answer 10

Utilizo una mezcla de float y overflow-x: oculto. Código mínimo, siempre funciona.

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

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

Answer 11

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

Answer 12

ACTUALIZAR

Si necesita colocar elementos en una fila, puede utilizar Flex Layout . Aquí tienes otro tutorial de Flex . Es una gran herramienta de CSS y aunque no es 100% compatible, cada día su support está mejorando. 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 tu problema. Espero que ayude.

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

MUY VIEJO

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

Puedes crear una tabla 1x2 y poner tus divs dentro, y luego formatear la tabla con CSS para colocarlos como quieras:

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

Nota

Si desea evitar el uso de la tabla, como se dijo antes, puede usar float: left; y float: right; y en el siguiente elemento, no olvide agregar un clear: left; clear: right; o clear: both; con el fin de tener la posición limpia.

Answer 13

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

Esto funcionará bien siempre y cuando establezca clear: both para el elemento que separa este bloque de dos columnas.