How to position an element to the bottom with css

[Andrew_88]

I Have this DOM that I can’t modify. I need to put the span with class “image” to the container bottom, after the unordered list. I can’t find a solution. List items number in unordered list could be change. I tried with position absolute but i can’t

<div class="container">
    <span class="image">
        <img src="">
    </span>
    <ul>
       <li>A</li>
       <li>B</li>
       <li>C</li>
      <li>D</li>
    </ul>
</div>

<div class="container">
    <span class="image">
        <img src="">
    </span>
    <ul>
       <li>A</li>
       <li>B</li>
       <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
</div>

[Paulie_D]

Simples…flexbox can do that.

https://codepen.io/Paulie-D/pen/omONPa

[Andrew_88]

Thank you for your answer. But there is another problem.

<div class="container">
    <span class="image">
        <img src="http://www.fillmurray.com/140/100">
    </span>
     <div class="title">TITLE</div>
    <ul>
       <li>A</li>
       <li>B</li>
       <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
</div>

If I’ve one div between Image and UL?

[Paulie_D]

You’d need to use the order property but you specifically stated that the HTML could not be changed. If you want detailed advice, please provide all the information required rather than piece by piece.

https://codepen.io/Paulie-D/pen/LqvGYM

[Author]

Posts