How can I get my divs to maintain a consistent height with one another?

Question

I have a series of scroll links throughout my website and am trying to get them to maintain the same height responsively so when one now has to use two rows the others change height to stay consistent. I came across a couple solutions on here which I'll get into in a sec. First let me show you the code.

body {
  background-color: #000;
}
.full_section {
  width: 100%;
  height: auto;
}
.Pro_Qual_s_link_frame {
  margin: 7em 0 11em 0;
  padding: 2em 0 2em 0;
  display: block;
}
.quarter_section {
  width: 25%;
  height: auto;
}
.Pro_Qual_s_link_container {
  float: left;
  padding: 2em 0 2em 0;
  display: block;
}
.Pro_Qual_s_link {
  width: 77%;
  margin: auto;
  padding: 2em 0 2em 0;
  border-radius: 0.44em;
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}
.color_style_b_1 {
  border-style: ridge;
  border-color: #888;
  border-width: .11em;
  color: #e0e0e0;
  background-color: rgba(150, 150, 150, 0.11);
  box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
  text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}
.color_style_g_1 {
  border-style: ridge;
  border-color: #55ED2B;
  border-width: .11em;
  color: #B5FFB8;
  background-color: rgba(10, 61, 12, 0.11);
  box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
  text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}
.color_style_k_1 {
  border-style: ridge;
  border-width: .11em;
  border-color: #DB3016;
  color: #FFAF69;
  background-color: rgba(102, 0, 0, 0.11);
  text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
  box-shadow: 0 0 3em rgba(214, 73, 34, 0.44);
}
.color_style_j_1 {
  border-style: ridge;
  border-width: .11em;
  border-color: #633191;
  color: #CD9AFC;
  background-color: rgba(67, 3, 150, 0.11);
  text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
  box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}



  
    
                Back To Top
            
  

  
    
                Specialty Practices
            
  

  
    
            Industries I've Served
            
  

  
    
                My Tools Of Choice

JSfiddle https://jsfiddle.net/Optiq/2xcuq6rs/3/

Here's the few solutions I've tried

Ok, so the first solution I found was to change the containing element's display to table and the elements inside of it to table-cell. In my instance I changed .Pro_Qual_s_link_frame to have the display of table and the .Pro_Qual_s_link to have the display of table-cell

I did this because the .Pro_Qual_s_link_container is there as part of the framework to keep everything tamed responsively. This didn't work, it also made the link as big as the Pro_Qual_s_link_container element. I tried playing with the height and width to see if I could get it to work, nothing happened.

Next I found a solution on here suggesting using flex. I set that up like this

.Pro_Qual_s_link_frame{
    margin: 7em 0 11em 0;
    padding: 2em 0 2em 0;
    display: flex;
}

.Pro_Qual_s_link{
    width: 77%;
    margin:auto;
    padding: 2em 0 2em 0;
    border-radius: 0.44em;
    text-align: center;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    flex: 1;
}

Not only did this not work, but it seems to have canceled out the width and padding. When I scale the size down I see 2 extra boxes pop up on each element like it's creating a new box for the second row of text. I played around more with various different settings like switching from percentages to em and it still didn't effect it.

I played around with the display settings on the 3 elements to see if I could come up with a combo of the two solutions that worked and nothing panned out. Did I do something wrong or miss a step somewhere? Or do I need a different solution for my particular instance?

Eria · Accepted Answer

A solution using display-table instead of flexbox (flexbox is great but if you need IE compatibility, you can't use it) :

HTML



    
        
            Back To Top
        
    

    
        
            Specialty Practices
        
    

    
        
            Industries I've Served
        
    

    
        
            My Tools Of Choice

CSS

body{
  background-color: #000;
}

.full_section {
    width: 100%;
    height: auto;
}

.Pro_Qual_s_link_frame {
    margin: 7em 0 11em 0;
    padding: 1em 0 1em 0;
    display: table;
    border-spacing: 30px;
}

.Pro_Qual_s_link_container {
    border-radius: 0.44em;
    border-style: ridge;
    border-width: .11em;
    display: table-cell;
    padding: 2em 0 2em 0;
    width: 25%;
}

.Pro_Qual_s_link {
    display: block;
    color: inherit;
    font-family: 'Roboto', sans-serif;
    margin:auto;
    padding: 2em 0 2em 0;
    text-align: center;
    text-decoration: none;
}

.color_style_b_1 {
    border-color: #888;
    color: #e0e0e0;
    background-color: rgba(150, 150, 150, 0.11);
    box-shadow: 0 0 3em rgba(222, 222, 222, 0.44);
    text-shadow: 0 0 1em rgba(222, 222, 222, 0.88);
}

.color_style_g_1 {
    border-color: #55ED2B;
    color: #B5FFB8;
    background-color: rgba(10, 61, 12, 0.11);
    box-shadow: 0 0 3em rgba(137, 237, 55, 0.44);
    text-shadow: 0 0 1em rgba(137, 237, 55, 0.88);
}

.color_style_k_1 {
    border-color: #DB3016;
    color: #FFAF69;
    background-color: rgba(102, 0, 0, 0.11);
    text-shadow: 0 0 1em rgba(214, 73, 34, 0.88);
    box-shadow: 0 0 3em rgba(214, 73, 34,  0.44);
}

.color_style_j_1 {
    border-color: #633191;
    color: #CD9AFC;
    background-color: rgba(67, 3, 150, 0.11);
    text-shadow: 0 0 1em rgba(140, 0, 255, 0.88);
    box-shadow: 0 0 3em rgba(140, 0, 255, 0.44);
}

Working Fiddle

How can I get my divs to maintain a consistent height with one another?

Here's the few solutions I've tried

Answers (2)

Related Questions