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

Question

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?

Two points (probably not at all related to your problem): **1:** the `/* <![CDATA[ */` is entirely unnecessary in any browser from beyond about 2004 (and so far as I know was only ever relevant for ` — David Thomas, Jun 19 '22 at 13:12
@DavidThomas - Yeah, the CDATA bit is just harmless cruft in a vi snippet. The missing curly was a copy/paste error. Thanks for pointing out the missing colon. (I don't think it affects the example, but I'll fix.) — J Bones, Jun 19 '22 at 13:22

David Thomas · Accepted Answer · 2022-06-19T14:06:39.327

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.

Further, as a somewhat delayed response, it's entirely possible to use CSS flexbox to lay out these cards, though I prefer to use CSS grid as you're creating a two-dimensional layout (and flex, while responsive and with many use-cases, is typically thought of as a one-dimensional layout). However:

/* a standard, mini, naive reset to reduce browser-default
   styles from creating cross-browser layout issues: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.popup {
  display: flex;
  flex-direction: row;
  /* specifying that the content can wrap to new rows: */
  flex-wrap: wrap;
  /* assigning a gap between adjacent elements: */ 
  gap: 0.5em;
  width: 50vw;
}

.thumb {
  /* setting the base-size of the .thumb element to 30% of
     its parent's width: */
  flex-basis: 30%;
}

/* setting the base-size of the element to 65% of its
   parent's width: */
.info {
  flex-basis: 65%;
}

.mini {
  /* width: 100% causes the <img> element to occupy the full width
     of its parent; and object-fit: cover causes the <img> to fully
     cover the space available, scaling if necessary but maintaining
     its aspect-ratio: */
  object-fit: cover;
  width: 100%;
}

.infofoot {
  background-color: azure;
  /* forces the size of the element to occupy 100% of the width of 
     its parent, taking the 'full' row: */
  flex-basis: 100%;
}

<section class="infobox">
  <main class="popup">
    <aside class="thumb">
      <img class="mini" src="https://www.fillmurray.com/200/300">
    </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>

References:

Thank you. Using clear seems to do just what I need with minimal effort. — J Bones, Jun 19 '22 at 13:38

score 0 · Answer 2 · answered Jun 19 '22 at 13:13

    <section class="infobox">
  <main class="popup">//make it flex column
<div >//make it flex row

    <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>
</div>

    <footer class="infofoot">
      <a target="windowid" href="http://example.com">A single line of linked text.</a>
    </footer>

  </main>
</section>

If at all possible, I need to do this without changing the HTML structure. I was a little strong in saying I "can't" do it, but it comes dynamically from a source I don't control and mucking with it would be... well, messy, to say the least. Is it possible to style the current structure to get the effect I need? — J Bones, Jun 19 '22 at 13:29

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

2 Answers2