Search code examples
csslayoutflexboxpositionalignment

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

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

screenshot

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.

    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: