1

asi es como estaasi es cmo lo necesitonecesito el texto del div "izda" que son 2 líneas, quede en la parte baja para que quede alineado por abajo con el texto del lado derecho (div "dcho") que son 7 líneas. gracias anticipadamente!

.cabecera {
    background-color: #2c2b2b;
    width: 100%;
    color: #ffffff;
    padding: 2% 5% 1% 5%;
    font-family: 'Questrial';
    overflow: auto;

}   


.izda {
    width: 70%;
    float: left;
    min-width: 500px;
}


.dcha {
    width: 30%;
    float: right;
}

.dcha p{
    font-family: "Lobster";
    font-size: 2.2em;
    font-weight: lighter;
    color: deepskyblue;
}

h1{
 
<div class="cabecera">
    <div class="izda">
      <h1>Promociones Comerciales</h1>
    <h5>Las mejores promociones para tu negocio!</h5>
    </div>
    <div class="dcha">
      <p>Seguros<br>Hipotecas<br>Imprenta<br>Copistería<br>Rotulación<br>Merchandising<br>...</p>
    </div>

</div>

2 respuestas 2

3

Puedes lograrlo utilizando Flexbox, declaramos al contenedor que tenga display: flex y a tu div .izda le declaramos align-self: flex-end;

.cabecera {
  background-color: #2c2b2b;
  color: #ffffff;
  padding: 2% 5% 1% 5%;
  font-family: 'Questrial';
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
}

.izda {
  width: 70%;
  min-width: 500px;
  align-self: flex-end;
}

.dcha {
  width: 30%;
}

.dcha p {
  font-family: "Lobster";
  font-size: 2.2em;
  font-weight: lighter;
  color: deepskyblue;
}
<div class="cabecera">
  <div class="izda">
    <h1>Promociones Comerciales</h1>
    <h5>Las mejores promociones para tu negocio!</h5>
  </div>
  <div class="dcha">
    <p>
      Seguros
      <br> Hipotecas
      <br> Imprenta
      <br> Copistería
      <br> Rotulación
      <br> Merchandising
      <br> ...
    </p>
  </div>

</div>

3
  • muchisimas gracias! ha salido bien pero no es responsive, el bloque de texto derecho, si la ventana es pequeña no se pone debajo del otro, como lo arreglo?
    – Basicmix
    Commented el 8 abr. 2018 a las 12:40
  • @Basicmix puedes hacerlo con flex-wrap: wrap, edité mi respuesta con lo que me pediste
    – user22721
    Commented el 8 abr. 2018 a las 14:33
  • genial, va perfecto!! muchísimas gracias!!!
    – Basicmix
    Commented el 8 abr. 2018 a las 15:01
0

No entendí muy bien lo que quieres lograr, pero te dejo este código, espero que te ayude.

.cabecera {
    background-color: #2c2b2b;
    width: 100%;
    color: #ffffff;
    padding: 2% 5% 1% 5%;
    font-family: 'Questrial';
    overflow: auto;

}   


.izda {
    width: 70%;
    float: left;
    overflow: hidden;
}


.dcha {
    width: 30%;
    float: left;
    overflow: hidden;
}

.dcha p{
    font-family: "Lobster";
    font-size: 2.2em;
    font-weight: lighter;
    color: deepskyblue;
}

h1{
<div class="cabecera">

    <div class="izda">
      <h1>Promociones Comerciales</h1>
      <h5>Las mejores promociones para tu negocio!</h5>
    </div>
    
    <div class="dcha">
      <p>Seguros<br>Hipotecas<br>Imprenta<br>Copistería<br>Rotulación<br>Merchandising<br>...</p>
    </div>

</div>

3
  • no funciona, lo que quiero es que el texto de la izquierda vaya abajo del todo
    – Basicmix
    Commented el 7 abr. 2018 a las 19:48
  • Podrías enviar una gráfica para ver que es lo que quieres exactamente? Commented el 7 abr. 2018 a las 20:51
  • he subido 2 imagenes, la 1a. es como esta, y la 2a. es como lo necesito, con el texto del div izdo. abajo. gracias!!
    – Basicmix
    Commented el 7 abr. 2018 a las 21:02

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.