How can I use flexbox to position this footer at the bottom of its parent container?

Question

How can I use flexbox to position this footer at the bottom of its parent container?

I'm not an experienced designer and it's been a while since I last worked with CSS. I'm diving into using flexbox layout for the first time and feeling a bit overwhelmed.

Here is the existing HTML structure that I need to work with and cannot modify:

<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 my current CSS code snippet:

<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;
}

When rendered, it looks like this...

https://i.sstatic.net/XnGFG.png

I'm struggling to get the footer section positioned below the image in the aside. I've experimented with align-self and flex-grow properties but haven't found a working solution yet. Can you provide guidance on how to achieve this?

css layout flexbox position alignment

Answer 1

Answer №1

When working with the float property, one method is to add clear: both to the element you want to display on a new line after 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.

To achieve a similar layout using CSS grid instead of flex-box:

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;
  gap: 0.5em;
  grid-template-areas: "thumb article" "footer footer";
}

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

Another option is to utilize CSS flexbox for card layouts:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.popup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  width: 50vw;
}

.thumb {
  flex-basis: 30%;
}

.info {
  flex-basis: 65%;
}

.mini {
  object-fit: cover;
  width: 100%;
}

.infofoot {
  background-color: azure;
  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>

Additional Resources:

Answer 2

When working with the float property, one method is to add clear: both to the element you want to display on a new line after 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.

To achieve a similar layout using CSS grid instead of flex-box:

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;
  gap: 0.5em;
  grid-template-areas: "thumb article" "footer footer";
}

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

Another option is to utilize CSS flexbox for card layouts:

*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

.popup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  width: 50vw;
}

.thumb {
  flex-basis: 30%;
}

.info {
  flex-basis: 65%;
}

.mini {
  object-fit: cover;
  width: 100%;
}

.infofoot {
  background-color: azure;
  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>

Additional Resources:

Answer 3

Answer №2

    <section class="infobox">
  <main class="popup flex-column">//make it flex column
<div class="flex-row">//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>

Answer 4

    <section class="infobox">
  <main class="popup flex-column">//make it flex column
<div class="flex-row">//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>

How can I use flexbox to position this footer at the bottom of its parent container?

Answer №1

Answer №2

Similar questions

Add a CSS style to an element when its parent container is hovered using Angular

Increase the bottom padding or add some extra space to the Bootstrap form or page

What is the best way to modify the underline style of a tab in Material UI?

Three brothers and sisters - One must expand responsively while the remaining two maintain minimum content sizes

What are the steps to incorporating the League Gothic font into my website design?

Discover the row and column of a selected table cell using vanilla JavaScript, no need for jQuery

Is there a way to combine fixed and dynamic size elements within a flexbox container?

LESS — transforming data URIs with a painting mixin

Optimizing responsiveness and side margins for high-resolution displays

Struggling to design a functional mobile keyboard

Is it possible to smoothly switch between two states using just a single animation class?

Exploring the functionality of the block grid and its purpose within Foundation5

Having trouble getting rid of the border-bottom?

Arrange the image in a way that flows smoothly with the text

Ways to slightly boost the default font-size values when using wicked-pdf

What is the best way to make a CSS class appear in my javascript using the method I have been using before?

Can you please explain the purpose of the white space in the HTML code?

Header components struggling with proper alignment in CSS

"Enhance Navigation: Sublevel Dropdowns with the Power of Twitter

Creating aesthetically pleasing and flexible rows with left-floated div elements of varying heights