Home / Questions / 299529
Accepted
Fernanda
Asked: 2020-10-10 03:21:18 +0800 CST 2020-10-10 03:21:18 +0800 CST

is it possible to align elements with float in their base?

  • 772

I have some divs that have different heights and I don't know how to align them at the bottom instead of at the top using the FLOAT property.

I pass example of what I have

#marcas {
  width: 100%;
  height: 300px;
  display: block;
  position: relative;
}
#marcas #contMarcas {
  width: 100%;
  background: red;
  position: absolute;
  height: 100%;
}
#marcas figure#der {
  width: 30%;
  height: 90%;
  background: yellow;
  text-align: right;
  position: relative;
  float: right;
}
#marcas figure#izq {
  width: 30%;
  height: 50%;
  background: green;
  position: relative;
  float: right;
}
<section id="marcas">
  <div id="contMarcas">
    <figure id="der"> </figure>
    <figure id="izq"> </figure>
  </div>
</section>

The idea is that both rectangles are aligned below maintaining float. Thank you

html5

1 Answers

  1. Best Answer

    Using flex-boxI have built an example that apparently behaves like yours, just with the specification you need. (both figurealigned by the base).

    The use of floatinevitably approaches its obsolescence, currently others are used displaythat give us what it gave us floatand many other things. (see display: flexor display: grid).

    #marcas {
    width: 100%;
    height: 300px;
    display: flex;
    position: relative;
}

#marcas #contMarcas {
    width: 100%;
    background: red;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

#marcas figure#der {
    width: 30%;
    height: 90%;
    background: yellow;
    text-align: right;
    position: relative;
    order: 2;
}

#marcas figure#izq {
    width: 30%;
    height: 50%;
    background: green;
    position: relative;
    order: 1;
}
    <section id="marcas">
  <div id="contMarcas">
    <figure id="der"> </figure>
    <figure id="izq"> </figure>
  </div>
</section>

    • 1