Home Using flexbox layout, how do I push this footer to the bottom of its containing main?

Questions

Using flexbox layout, how do I push this footer to the bottom of its containing main?

June 19, 2022

I’m not a designer and haven’t done anything much with CSS in quite a while. This is the first time I’ve had to use flexbox layout, and I’m a little lost.

This is the HTML structure I have to work with… I can’t change this.

<section class="infobox">
  <main class="popup">
    <aside class="thumb"><img class="mini" src="image.jpg" /></aside>
    <article class="info">
    <h1>Heading Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
    </article>
    <footer class="infofoot">
      <a target="windowid" href="http://example.com">A single line of linked text.</a>
    </footer>
  </main>
</section>

This is the CSS I currently have:

<style type="text/css">
/* <![CDATA[ */
a {
  text-decoration: none;
}

img.mini {
  width: 20vw;
  height: 20vh;
  float:left;
  padding: 20px 10px 10px 10px;
}

.infobox { 
  display: flex;
  flex-direction: column;
}
.popup { 
  width: 50vw;
  flex-direction: row;
}

This is how it renders…

I need the footer section to fall below the image in the aside. I’ve tried various things with align-self and flex-grow (among others) but have not happened upon a working solution. How do I accomplish this?

>Solution :

One approach, as always when dealing with float, is to simply assign clear: both to the element you wish to appear on a new line following the floated element:

a {
  text-decoration: none;
}

img.mini {
  width: 20vw;
  height: 20vh;
  float: left;
  padding: 20px 10px 10px 10px;
}

.infobox {
  display: flex;
  flex-direction: column;
}

.popup {
  width: 50vw;
  flex-direction: row;
}

/* forces the selected element(s) to a new line: */
.infofoot {
  clear: both;
}

<section class="infobox">
  <main class="popup">
    <aside class="thumb"><img class="mini" src="image.jpg" /></aside>
    <article class="info">
      <h1>Heading Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
    </article>
    <footer class="infofoot">
      <a target="windowid" href="http://example.com">A single line of linked text.</a>
    </footer>
  </main>
</section>

JS Fiddle demo.

An alternative is to use CSS grid – instead of flex-box – layout:

a {
  text-decoration: none;
}

img.mini {
  width: 20vw;
  height: 20vh;
  float: left;
  padding: 20px 10px 10px 10px;
}

.popup {
  width: 50vw;
  /* using grid layout: */
  display: grid;
  /* setting a gap between adjacent elements of 0.5em (purely aesthetic,
     adjust to your preferences: */
  gap: 0.5em;
  /* naming the three grid areas; here we define two rows (each quoted
     string defines one row) each with two columns, each with named areas.
     The first row has an area named 'thumb' and another named 'article',
     the second has one area that spans both columns, named 'footer'.
     We use the order of the elements in the DOM to place the various
     elements appropriately: */
  grid-template-areas: "thumb article" "footer footer";
}

.infofoot {
  /* in order to see that the .infofoot spans both columns: */
  background-color: azure;
  /* specifying that the .infofoot element should span two
     columns: */
  grid-column: span 2;
}

<section class="infobox">
  <main class="popup">
    <aside class="thumb">
      <img class="mini" src="image.jpg">
    </aside>
    <article class="info">
      <h1>Heading Text</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
    </article>
    <footer class="infofoot">
      <a target="windowid" href="http://example.com">A single line of linked text.</a>
    </footer>
  </main>
</section>

JS Fiddle demo.

References: