Skip to main content
Publicación recuperada por user128299
Publicación eliminada por user128299
se añadieron 86 caracteres en el cuerpo
Origen Enlace
user128299
user128299
Origen Enlace
user128299
user128299

comento lo siguiente:

  • Noto que tratas de obtener un resultado de 3 columnas, lo digo por que veo un espacio en blanco entre la columna de texto y la zona de las redes sociales
  • Para este caso considero que si ya estás usando flexbox entonces no tiene caso estar aplicando el float
  • Mas allá de eso considero que te sería mas conveniente aplicar una rejilla de 3 columnas para conseguir el resultado deseado

Entonces:

  • Tendremos una sección principal con una distribución de tipo grid
  • Estableceremos una división uniforme de 3 columnas
  • Como originalmente solo tenemos contenido para 2, entonces podemos trabajar con las grid areas e indicar las áreas que nuestra rejilla va a tener
    • En este paso vinculamos el nombre que le damos al grid-area en el contenedor padre o grid-container con la clase que le damos a la etiqueta HTML que deseamos acomodar, que mas o menos se vería así:

Estructura

grid-template-areas: "identificador";

.nombre-clase {
    grid-area: identificador;
}

Ejemplo

    <style>
      :root {
        --borde-identificador: 1px solid crimson;
      }
      .section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: "descripcion vacio social";
        border: 1px solid;
        padding: 5px; /*para distinguir el borde del contenedor padre*/
      } 
      .descripcion {
        grid-area: descripcion;/*nombre del grid-area*/
        border: var(--borde-identificador);
      }
      .vacio {
        grid-area: vacio; /*nombre del grid-area*/
        border: var(--borde-identificador);
      }
      .social {
        grid-area: social; /*nombre del grid-area*/
        border: var(--borde-identificador);
      }
    </style>
    <div class="section">
      <div class="descripcion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.vLorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor aut similique autem quae, molestias consectetur assumenda dolorem atque vel alias aliquam saepe, nemo in quo sequi sunt. Ea, veniam odit.v
        
      </div>
      <div class="vacio">
        
      </div>
      <div class="social">
        Aquí los enlaces a Facebook
      </div>
    </div>

Aquí puedes leer mas sobre el soporte de GRID