organizando div uno debajo del otro

Question

Tengo dos divs internos que están anidados dentro de una envoltura div. Quiero que los dos divisores internos se organicen uno debajo del otro. Pero a partir de ahora se organizan en la misma línea.

<div id="wrapper"> 
    <div id="inner1"></div> 
    <div id="inner2"></div> 
</div> 

CSS es

#wrapper{ 
    margin-left:auto; 
    margin-right:auto; 
    height:auto; 
    width:auto; 
} 
#inner1{ 
    float:left; 
} 
#inner2{ 
    float:left; 
} 

Answer 1

Prueba a borrar: izquierda en # inner2. Debido a que ambos están configurados para flotar, debería causar un retorno de línea.

#inner1{ 
float:left; 
} 
#inner2{ 
float:left; 
clear: left; 
} 

Answer 2

Si desea que los dos div s que se muestren uno encima del otro, la respuesta más simple es eliminar el float: left; de la declaración CSS, ya que esto hace que se colapse al tamaño de su contenido (o el tamaño css definido), y, así flotarán uno contra el otro.

O bien, simplemente puede agregar clear:both; al div s, lo que obligará al contenido flotante a borrar los flotantes anteriores.

Answer 3

Usted ni siquiera necesita el float:left;

Al parecer, el comportamiento por defecto es hacer que uno debajo del otro, si esto no sucede es porque ellos están heredando un poco de estilo desde arriba.

CSS:

#wrapper{ 
    margin-left:auto; 
    margin-right:auto; 
    height:auto; 
    width:auto; 
} 
</style> 

HTML:

<div id="wrapper"> 
    <div id="inner1">inner1</div> 
    <div id="inner2">inner2</div> 
</div> 

Answer 4

El comportamiento predeterminado de divs es tomar todo el ancho disponible en su contenedor principal.
Esto es lo mismo que si le dieras a los divs internos un ancho del 100%.

Al flotar los divs, ignoran su valor predeterminado y dimensionan su ancho para ajustarse al contenido. Todo lo que está detrás de él (en el HTML), se coloca debajo del div (en la página representada).
Esta es la razón por la que se alinean uno al lado del otro.

El flotador propiedad CSS especifica que un elemento debe tomarse de el flujo normal y se coloca a lo largo del lado izquierdo o derecho de su contenedor , donde los elementos de texto y en línea se envuelva alrededor de él. Un elemento flotante es aquel en el que el valor calculado de float no es ninguno.

Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/float

Deshacerse de la flotación, y los divs estarán alineados debajo de los otros.
Si esto no sucede, tendrá algún otro css en divs o hijos de wrapper que definan un comportamiento flotante o una visualización en línea.

Si desea mantener el flotador, por cualquier razón, puede usar clear en el 2º div para restablecer las propiedades flotantes de los elementos antes de ese elemento.
clear tiene 5 valores válidos: none | left | right | both | inherit.No se borran los flotantes (utilizados para anular las propiedades heredadas), los flotadores izquierdo o derecho o ambos flotadores. Heredar significa que heredará el comportamiento del elemento padre

Además, debido al comportamiento predeterminado, no es necesario establecer el ancho y alto en automático.
Solo necesita esto si desea establecer un alto/ancho codificado. P.ej. 80%/800px/500em/...

<div id="wrapper"> 
    <div id="inner1"></div> 
    <div id="inner2"></div> 
</div> 

CSS es

#wrapper{ 
    margin-left:auto; 
    margin-right:auto; 
    height:auto; // this is not needed, as parent container, this div will size automaticly 
    width:auto; // this is not needed, as parent container, this div will size automaticly 
} 

/* 
You can get rid of the inner divs in the css, unless you want to style them. 
If you want to style them identicly, you can use concatenation 
*/ 
#inner1, #inner2 { 
    border: 1px solid black; 
}