Cómo centrar una caja entre otras dos en HTML y CSS

[nahuelvazquez6]

Me he topado con un problema que parece sencillo pero que no logro resolver. La situación es la siguiente:

Tengo un contenedor sobre el cual quiero posicionar tres cajas. Las caja izquierda, la caja central, y la caja derecha. Pero que entre caja y caja haya un margen automático (no especificado en alguna unidad).

Código HTML

<div class="contenedor">
    <ul class="lista_desordenada">
         <li class="caja_izquierda">
         </li>
										
         <li class="caja_centro">
         </li>
										
         <li class="caja_derecha">
        </li>
    </ul>
</div>

Código CSS

.contenedor{
	margin-right:auto;
	margin-left:auto;
	width:790px;
	height:800px;
	background-color:green;
	}

.lista_desordenada{
	width:100%;
	}

.caja_izquierdal{
	float:left;
	width:250px;
	height:60px;
	}

.caja_centro{
	width:250px;
	height:60px;
        margin-left:auto;
        margin-right:auto;
	}

.caja_izquierda{
	float:right;
	width:250px;
	height:60px;
	}

Se me ocurrió utilizar un float para alinear la caja izquierda a la izquierda, uno para alinear la caja derecha a la derecha y a la caja del centro añadirle un margen automático con respecto al ancho del contenedor general. Esto no me funciono ya que la caja de la derecha se posiciona mas abajo, como si el margen rompiera la alineación del float. Aquí una imagen

Imagen

Alguna forma sencilla de hacerlo? Gracias por leerme!

 

[antoninicr7]

Debes de crear una misma lista con las tres cajas, y añadirle simplemente un float left.
Si no entiendes lo que digo ahora en un rato pillo el ordenador y te hago el código.
Un saludo

 

[nahuelvazquez6]

Debes de crear una misma lista con las tres cajas, y añadirle simplemente un float left.
Si no entiendes lo que digo ahora en un rato pillo el ordenador y te hago el código.
Un saludo

Hola, gracias por contestar! Comprendo lo que dices, me olvide de colocar un detalle importante en el post (ya lo edite). Me gustaría que entre caja y caja haya un margen automático (no especificado en alguna unidad).
Es decir, alinearlos no tengo problema, el problema surge cuando quiero agregar ese margen entre caja y caja

 

[lombervid]

Con Flexbox es fácil hacer eso.

HTML:

<div id="contenedor">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

CSS:

#contenedor {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.left,
.right {
    width: 20%;
    height: 150px;
    background: green;
}
.center {
    width: 50%;
    height: 300px;
    background: pink;
}

https://jsfiddle.net/mag2bqku/embedded/result/

Saludos.

 

[nahuelvazquez6]

Con Flexbox es fácil hacer eso.

HTML:

<div id="contenedor">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

CSS:

#contenedor {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.left,
.right {
    width: 20%;
    height: 150px;
    background: green;
}
.center {
    width: 50%;
    height: 300px;
    background: pink;
}

https://jsfiddle.net/mag2bqku/embedded/result/

Saludos.

Lo probé y funciona! Te agradezco un monton 😛8:

 

[Lenny Creative]

muy bueno eso de los Flexbox, hace unos minutos me tope con un tutorial de ello y despues de ver par de video tutoriales veo que es muy util para no romperse la cabeza, tambien recomendar en ya no usar tanto px en los anchos sino porcentajes, pero con Flexbox lo veo mas bueno, aunque no se que tan cierto es la compatibilidad con algunos navegadores que tienes que agregarle prefijos.

 

[pinchox]

Otra cosa que se puede hacer es absolutizar las cajas de la izquierda y derecha. De ese modo, se van a mostrar siempre ahi, mientras que a la caja central la tenes con margenes auto.