How to make CSS rows have equal height?

Question

I have a site, basic CSS layout, Top bar with logo and nav, image container below it, and then content a footer.

In the 'content area' I have set up two div classes, oSection and eSection (odd and even, clever, I know). I did this so each div could have an alternating background color to easily visually break up the packets of content. However, these rows are not of equal height. They seem to expand only to the height of what content is contained within the div. Ideally, I'd like each of these divs to have the same height, regardless of how much content is in the div (I guess it would have to be as tall (same height) as largest div), but I also want to make sure they are each on their own individual line, so what I really need is equal height divs that are stacked on top of each other

I have tried using Flexbox with various properties, but it wasn't working as I expected it to.

.oSection {
    /*margin: 2% 0; */
    background-color: #E6E6E6;
    height: 50%;
    padding-left: .5%;
    padding-top: .5%;
    padding-bottom: .5%;
}
.eSection {
   /* margin: 2% 0; */
    background-color: #FFFFFF;
    height: 50%;
    padding-left: .5%;
    padding-top: .5%;
    padding-bottom: .5%;
}

<div class="oSection">
    <b>Web Design</b><br>
     Yada yada yada
</div>
<div class="eSection">
    <b>Microsoft SharePoint</b><br>
    Yada yada yada<br>
</div>
<div class="oSection">
    <b>Microsoft Dynamics CRM</b><br>
    yad yada yada
</div>
<div class="eSection">
    <b>Technology Consulting</b><br>
    yada yada yada
</div>

Here is a screenshot showing the mis-sized Divs. I want each of the horizontal divs with text in them (not header or footer, just the middle divs) to be the same height, and continue to be stacked on top of each other like they are now.

Mis-Sized Divs

Paulie_D · Accepted Answer · 2015-07-21 19:39:42Z

2

I think you are after something like this.

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.oSection,
.eSection {
  flex: 1;
}
.oSection {
  background-color: #E6E6E6;
}
.eSection {
  background-color: #FFFFFF;
}

<div class="container">
  <div class="oSection"> <b>Web Design</b>

    <br/>Yada yada yada</div>
  <div class="eSection"> <b>Microsoft SharePoint</b>
    <br/>Yada yada yada
    <br/>
    <br/>
    <br/>Yada yada yada
    <br/>
  </div>
  <div class="oSection"> <b>Microsoft Dynamics CRM</b>

    <br/>yad yada yada</div>
  <div class="eSection"> <b>Technology Consulting</b>

    <br/>yada yada yada</div>
</div>

answered Jul 21, 2015 at 19:39

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Keith Over a year ago

this sets each box evenly, but if you have more text than what you set it to, each box won't flex to expand and show the rest of the text

Paulie_D Over a year ago

Well it can't within the confines of this demo because there isn't room if you have a more accurate demo we might be able to adapt.

Brian Frick Over a year ago

Thank you kindly @Paulie_D! I will give this a shot and see if it works for me. I think it will - and I'll just downsize it for mobile. Like I said - I may not even use it, just wanted to know it was possible and see how to implement. Thanks for taking the time

Huang Chen · Accepted Answer · 2015-07-21 19:17:05Z

0

instead of using % use height: 480px or whatever amount you want?

I'm not sure how specific you want this, this is just speculation, I can edit my answer if you provide a screenshot of what you have vs what you want though

answered Jul 21, 2015 at 19:17

Huang Chen

1,20511 silver badges24 bronze badges

10 Comments

Brian Frick Over a year ago

Thanks for the quick response. I cannot use px, as I am designing this to be mobile friendly as well - so Percentages, or VH/VW are my best options. I will edit the post to show you what I've got now - but I won't be able to show you what I want, but you should be able to tell pretty easily - you'll see my oSection and eSection are different heights, when I want them to be the same. Also, its only at 50% in my code just because I was trying to do an exaggerated example. It is likely to be closer to 10-15% in its final form.

Keith Over a year ago

then use max-height and max-width for mobile, so bascially you set the width to 100% but use max-width: 480px; to set the width

Huang Chen Over a year ago

Have you tried enclosing all four of those divs in a single div that has a defined height? perhaps relative to the screen?

Keith Over a year ago

so basically no matter how many lines of text there are in each div, you want the the other divs to match the longest or tallest div that you have?

Huang Chen Over a year ago

Well the reason it's driving you crazy because you're asking for something that is a bad practice & contradicting. You want all of them to be "equal height" which means they will be technically static regardless of the amount of content they have; yet you want them to be dynamic with percentages in a mobile context.

|

HLLL · Accepted Answer · 2017-06-13 22:45:40Z

0

Flexbox can't achieve this. Only CSS Grid can, so your browser support is somewhat shallow.

The main thing is to set grid-auto-rows: 1fr on the CSS grid container and have it's height undefined.

Hre's a pen: https://codepen.io/Hlsg/pen/XgjWMz

answered Jun 13, 2017 at 22:45

HLLL

3,8512 gold badges14 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to make CSS rows have equal height?

3 Answers 3

3 Comments

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related