How do you put the left div text aligned to the left and bottom?

Question

How do you put the left div text aligned to the left and bottom?

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

I need the text of the "left" div which are 2 lines, is in the lower part so that it is aligned below with the text on the right side (div "dcho") which are 7 lines. thanks in advance!

.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>

html css

asked by Basicmix 07.04.2018 в 21:00

source

2 answers

0

I did not understand very well what you want to achieve, but I leave this code, I hope it helps you.

.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>

answered by 07.04.2018 в 21:20

Paging iterations of a for cycle in Javascript delay in form with jquery

score 3 · Accepted Answer

You can achieve this using Flexbox, we declare the container to have display: flex and to your div .izda we declare 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>