Streaming live at 10am (PST)

Column won't fill the height of its container

On one of my pages, I have a pair of columns. The second column has a background image that’s intended to fill the whole height of the page body. However, it looks like this even though it’s set to fill 100% height of its container.

The right column itself:

From the screenshot, you can clearly see that the row which parents the column goes across the full height of the page’s body. However, the column itself only fills about 90% of that width. Why is this?

Here is my public share link: LINK

Hi @winterdrake

This would require flexbox. Here is a simple tutorial:

Hope this helps :wink:

Edit: Why should you use flexbox: Because the left column has height: auto you will want to have the right column have the same height as the height auto of the left column. Since the right column doesn’t have the same content in it as the left column you can’t just set it to height auto just like the left column. In these situations flexbox can be really helpful.

Wow, incredibly helpful, thank you!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.