0

estoy intentando dentro de una section poner 2 divs uno a cada lado pero por más que lo intento no consigo ponerlos, tengo diferentes problemas.

tengo este código en html:

<section class="formulario">
    
    <h1>¡Contacta conmigo!</h1>
    <div class="recuadro2">
        <H1>SIGUEME EN REDES SOCIALES</H1>
    </div>
    <div class="recuadro_form">
        <h3>Escríbeme y en breve me pondré en contacto contigo</h3>

    </div>
</section>

CSS:

.formulario{
    background: rgba(255, 255, 255, 0.5);
    text-align:center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 10%;
    padding-right: 10%;
    height: auto;

}

.recuadro_form{
    background:rgba(105, 19, 72, 0.527);
    margin:0px auto;
    height: 450px;
    width: 450px;
    float: right;

}
.recuadro2{
    width: 450px;
    height: 450px;
    color:black;
    background: yellow;
    float: left;
}

de esta forma el problema es que se me pasa del section y no me respeta el margen (lo verde es del devtools, es el section:

introducir la descripción de la imagen aquí

Parece algo muy simple pero no he conseguido hacerlo, he probado de todas las formas que he encontrado por la red, tengo un media query para que cuadno reduzca resolución se quite el float y se ponga debajo, esto si me funciona bien...

He puesto las medidas width por poner algo y el fondo para diferenciarlo, la idea es poner en el amarillo los botones de redes sociales y en la izquierda un formulario simple, no sé si debo poner obligatoriamente el width o puede ser auto.

¿me podéis ayudar? ¿Cuál es el error de novato que no me deja avanzar?

Gracias!!

edito:

Tras modificar el CSS quedando así:

.recuadro_form{
    background:rgba(105, 19, 72, 0.527);
    margin:0px auto;
    height: 450px;
    width: 480px;
    display: inline-block;
}
.recuadro2{
    width: 200px;
    height: 480px;
    color:black;
    background: yellow;
    display: inline-block;
}

se me pone así y no sé por qué esa forma tan fea de posicionarse

introducir la descripción de la imagen aquí

1
  • Ya que trabajás con html y css, podés crear un ejemplo mínimo verificable en la pregunta insertando un snippet (con el botón que indica <>).
    – padaleiana
    el 16 dic. 2021 a las 18:45

2 respuestas 2

1

En éste caso es necesario usar display:flex para el contenedor padre: .formulario, y resolver con columnas. Pero el caso es que interfiere la etiqueta<h1> que esta como título, entonces, para estructurar de una buena manera, es necesario agregar un padre para los dos cuadros: .recuadro_form y .recuadro2.

El nuevo padre que agregué es .container. Entonces el div .formulario siendo display flex, le damos una dirección columna para que haya dos columnas (.titulo y .container). Partiendo de aquí, manejamos el contenedor nuevo de los dos cuadros a gusto.

 

*,html,body {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.formulario { 
 display: flex;
 flex-direction: column;
 position:relative;
 background: rgba(255, 255, 255, 0.5); 
 padding: 50px 10%;
 width:100%;
}

.container {
 display: flex;
}

.titulo {
 padding: 50px 10%;
 text-align: center;
}

.recuadro_form, .recuadro2 {
 display: inline-block;
 position:relative;
 text-align: center;
 width: 50%;
 height: 450px;
 margin: auto;
 padding: 5% 5%;
 color: black;
}

.recuadro_form { 
 background:rgba(105, 19, 72, 0.527);
}

.recuadro2 {
 background: yellow;
}
 

<section class="formulario"> 
   
   <h1 class="titulo">¡Contacta conmigo!</h1>
   
   <div class="container">

<div class="recuadro2">
 <H1>SIGUEME EN REDES SOCIALES</H1> 
</div> 

<div class="recuadro_form"> 
 <h3>Escríbeme y en breve me pondré en contacto contigo</h3>
</div>
   
   </div>
  
  </section>

1
  • Mil gracias, al final lo pude resolver con un mediaquery para cuando colapsara (así pude aplicar un margen izquierda y derecha entre los divs) y con la propiedad vertical-align:top; en el que se me bajaba lo iguale. aún así probaré lo que dices! gracias!!!! De la forma que lo puse el recuadro cuando reduzco resolución (para movil) se pone debajo y se ve mejor, pero voy a investigar el uso del flex, estoy muy verde en todo!! el 17 dic. 2021 a las 11:17
0

No uses float para posicionarlos uno al lado del otro, mejor ponle a tus clases .recuadro_form y .recuadro2 un display: inline-block;

si se pone uno abajo del otro es por que los divs tiene un tamaño muy grande o una margen muy grande

quedaria así:

.recuadro_form{
    background:rgba(105, 19, 72, 0.527);
    margin:0px auto;
    height: 450px;
    width: 480px;
    display: inline-block;

}
.recuadro2{
    width: 480px;
    height: 450px;
    color:black;
    background: yellow;
    display: inline-block;
}

Para que te queden centrados debes darle un text-align: center; a tu clase formulario

1
  • Hola y gracias por responder, he hecho lo que dices pero me queda de la siguiente forma, creo que eso (por el resultado) ya lo había intentado anteriormente, añado foto al post original el 16 dic. 2021 a las 17:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.