0

Estoy intentando hacer una aplicación web. Tengo dos divs que me gustaría separar un poquito, pero quiero que estén en la misma fila.

Es decir, estoy intentando que haya algo de margen entre ellos, pero no hay forma. Cuando pongo margen, salta a la línea de abajo (normal, pues ocupa el 50% del width).

Estoy seguro que hay alguna solución, pero llevo rato buscando y no encuentro nada.

introducir la descripción de la imagen aquí

.container {
  background: #cccccc;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.dates {
  background: #dddddd;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
<div class="col-6 dates">

  <p>Input1: <input type="text" name="randominput"></p>
  <p>Input2: <input type="text" name="randominput"></p>
  <p>Input3: <input type="text" name="randominput"></p>
  <p>Input4: <input type="text" name="randominput"></p>
                    </div>

<div class="col-6 dates">
  <h2>Dates</h2>
  <p id="data-valorar">Data valorar: <input type="date" name="data-valorar" value="<?=$com['data_valorar']; ?>"></p>
</div>

Ojalá alguien sepa cómo separar eso, porque llevo rato intentándolo y no hay forma.

2
  • El código no se corresponde con la imagen y no se ve error alguno. Quedan los input en columna y separado por un espacio, también debajo, el input Date.
    – Juan
    Commented el 27 jul. 2021 a las 11:43
  • Saludos, no añadí el código entero porque se hacía muy largo y con mucho php en medio. Creí haber insertado la parte importante.
    – Tupi
    Commented el 28 jul. 2021 a las 11:02

1 respuesta 1

1

Puedes tratar de encerrar el contenido un otro div y a este aplicarle la clase date.

<div class="col-6">
  <div class="dates">
    <p>Input1: <input type="text" name="randominput"></p>
    <p>Input2: <input type="text" name="randominput"></p>
    <p>Input3: <input type="text" name="randominput"></p>
    <p>Input4: <input type="text" name="randominput"></p>
  </div>
</div>

<div class="col-6">
  <div class="dates">
    <h2>Dates</h2>
    <p id="data-valorar">Data valorar: <input type="date" name="data-valorar" 
    value="<?=$com['data_valorar']; ?>"></p>
  </div>
</div>
1
  • Muchísimas gracias, ¡eso resolvió mi problema!
    – Tupi
    Commented el 28 jul. 2021 a las 11:10

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.