How to use CSS to make 2 columns with different backgrounds equal height?

Question

I have two columns (using Wordpress #Primary and #Secondary) that have varied length of content for each page. Each column has its own background style, one is a gradient (#primary), the other a background image (#Secondary).

When each column has a different amount of content height wise, the gradient or image only goes down to the content in the column.

How do I get the column styles to be 100% of the height of the longer column?

score 1 · Accepted Answer · answered Aug 05 '20 at 03:52

1

Use flex.

.container {
  border: 2px solid green;
  padding: 20px;
  display: flex;
}

.container>div {
  border: 1px solid black;
  background: #ececec;
  padding: 10px;
  margin-left: 10px;
  flex: 1;
}

<div class="container">
  <div>Div 1 Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1</div>
  <div>Div 2</div>
</div>

answered Aug 05 '20 at 03:52

K K

17,794
4
30
39

Thanks, but how do I apply that to the columns #primary (content) and #secondary (sidebar)? – gwmbox Aug 05 '20 at 03:55
Aha, I applied it to the wrong thing :) Works now :) – gwmbox Aug 05 '20 at 03:56

How to use CSS to make 2 columns with different backgrounds equal height?

1 Answers1