Making the height of two divs equal within the same parent element using CSS

Question

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left.

I initially used jQuery in a separate file to resolve this issue, but since it's related to CSS, I'd prefer finding a pure CSS solution. I've experimented with suggestions on StackOverflow, like using display: inline-block or display: inline-table, but they didn't provide a satisfactory fix.

You can view the Codepen link below for reference:

Seeking guidance on achieving this goal through CSS alone. Any suggestions?

Link to Codepen

HTML:

<div id="innerwrapper">
        <div class="sidebar">
            <div class="menu">
                <ul>
                    <li>..</li>
                    <li>..</li>
                    <li>..</li>
                    <li>..</li>
                    <li>..</li>
                </ul>
            </div>
            <div class="content">
                 <!-- content !-->
            </div>
        </div>
        <div class="content">
            <!-- content !-->
        </div>
    </div>

CSS:

#innerwrapper {
        width: 66.66%;
        margin: auto;
    }

    #innerwrapper .sidebar {
        width: 15%;
        background-color: #DFE2DB;
        float: left;
    }

    .sidebar .menu li {
        display: block;
    }

    #innerwrapper > .content {
        width: 80%;
        float: left;
    }

jQuery:

function equalColHeight()
    {
        var $col1 = $('#innerwrapper .sidebar');
        var $col2 = $('#innerwrapper > .content');

        if ($col1.height() < $col2.height()) {
            $col1.height($col2.height());
        }
    }

    $(document).ready(function() {
        equalColHeight();
    });

html css height

Answer 1

Answer №1

Forget about Javascript - this trick can be achieved with just some simple CSS!

All you need to do is enclose both the content and navigation within a div element, which should be styled with the color of the sidebar (in this case, grey). Then, set the content div to have a white background and use display:inline-block.

Here's the HTML:

<div id="innerwrapper">
    <div class="sidebar">
    </div>
    <div class="content">
    </div>
</div>

And the corresponding CSS:

#innerwrapper {
    width: 66.66%;
    margin: auto;
    background-color:#DFE2DB;
}

#innerwrapper .sidebar {
    width: 15%;
    background-color: #DFE2DB;
    float: left;
}

#innerwrapper > .content {
    width: 85%;
    display: inline-block;
    background: #fff;
}

Check out the Plunker Here for a live demo!

Answer 2

Forget about Javascript - this trick can be achieved with just some simple CSS!

All you need to do is enclose both the content and navigation within a div element, which should be styled with the color of the sidebar (in this case, grey). Then, set the content div to have a white background and use display:inline-block.

Here's the HTML:

<div id="innerwrapper">
    <div class="sidebar">
    </div>
    <div class="content">
    </div>
</div>

And the corresponding CSS:

#innerwrapper {
    width: 66.66%;
    margin: auto;
    background-color:#DFE2DB;
}

#innerwrapper .sidebar {
    width: 15%;
    background-color: #DFE2DB;
    float: left;
}

#innerwrapper > .content {
    width: 85%;
    display: inline-block;
    background: #fff;
}

Check out the Plunker Here for a live demo!

Answer 3

Answer №2

Incorporating Mr.Alien's suggestion, you have the option to utilize either table-cell; or flex.

All jQuery has been removed and replaced with the necessary CSS to achieve this by using display: table-cell;.

Modifications in CSS

#innerwrapper {
  width: 66.66%;
  margin: auto;
  display: table; /* Removed floats and added display table to parent */
}

#innerwrapper .sidebar {
  width: 15%;
  background-color: #DFE2DB;
  display: table-cell;  /* Removed floats and added display table-cell */
}

#innerwrapper > .content {
  width: 85%;
  display: table-cell;/* Removed floats and added display table-cell */
}

Demonstration incorporating changes

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
}
html {} body {
  background-color: #191919;
}
header {} #title {
  font-family: serif;
  font-size: 1.1em;
  margin: auto;
  width: 66.66%;
  color: #DFE2DB;
  height: 6em;
}
#navwrapper {
  background-color: #FFF056;
}
#navwrapper .menu {
  font-size: 1.1em;
  font-family: sans-serif;
  margin: auto;
  width: 66.66%;
}
#navwrapper li {
  background-color: #E6D84D;
  padding: 0.1em 0.5em;
  display: inline-block;
}
#mainwrapper {
  background-color: #FFFFFF;
}
#mainwrapper:after {
  content: "";
  display: table;
  clear: both;
}
#innerwrapper {
  width: 66.66%;
  margin: auto;
  display: table;
}
#innerwrapper .sidebar {
  width: 15%;
  background-color: #DFE2DB;
  display: table-cell;
}
.sidebar .menu li {
  display: block;
}
#innerwrapper > .content {
  width: 85%;
  display: table-cell;
}

<header>
  <div id="title">
    <h1>Something</h1>
  </div>
</header>
<div id="navwrapper">
  <div class="menu">
    <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
      <li>Test 4</li>
      <li>Test 5</li>
    </ul>
  </div>
</div>

<div id="mainwrapper">
  <div id="innerwrapper">
    <div class="sidebar">
      <div class="menu">
        <ul>
          <li>Test 1</li>
          <li>Test 2</li>
          <li>Test 3</li>
          <li>Test 4</li>
          <li>Test 5</li>
        </ul>
      </div>
      <div class="content">
        Phasellus quis libero eros. Maecenas at mauris ornare, vestibulum nulla sit amet, blandit mauris. Pellentesque ut luctus magna, vitae aliquam diam. Nam egestas urna quam, ac tincidunt lorem ornare non. Morbi non leo at enim lacinia tincidunt.
      </div>
    </div>
    <div class="content">
      <p>
        Integer quis auctor nibh, in pellentesque mi. In et rutrum mauris. Suspendisse rutrum bibendum arcu, non molestie orci iaculis id. Praesent ornare eros at nibh bibendum congue. Aliquam erat volutpat. Etiam sit amet ipsum eget lectus lobortis viverra ac
        sed dolor. Nunc tortor dolor, semper ac lobortis quis, ornare iaculis mauris. Donec convallis quis risus nec suscipit. Aenean vitae tempus sem. Nunc id sollicitudin leo, eu malesuada leo. Cras scelerisque, libero non tristique sollicitudin, metus
        lectus eleifend tellus, ac semper odio magna lacinia ex. Vestibulum ante libero, porttitor a turpis eget, mattis blandit ipsum. Nulla et ipsum vel mi aliquet porttitor non in enim. Sed nec nibh bibendum, facilisis lorem vel, tempus nisi. Sed cursus
        purus ac elit pulvinar, in fringilla quam eleifend. Fusce non commodo velit, eu tempus nisi. Phasellus lacus lorem, consectetur at metus ut, auctor pretium dui. Vestibulum elit diam, blandit ut neque vitae, tempor mollis ipsum. Vestibulum nec
        justo a augue mattis consectetur. In hac habitasse platea dictumst. Cras pharetra nisl eu nulla tempor convallis. Maecenas volutpat consequat luctus. Cras consequat, ligula in ullamcorper egestas, diam sapien aliquam quam, sed iaculis orci odio
        id dolor. Integer in dui vestibulum, dictum turpis mollis, rhoncus nisi. In hac habitasse platea dictumst. Praesent id velit euismod, molestie mi eu, volutpat metus. Quisque rhoncus ante id lectus accumsan, scelerisque consectetur velit efficitur.
        Maecenas aliquet fringilla feugiat. Aenean feugiat nulla ac tortor elementum, vel ultrices urna malesuada. Mauris et metus id velit semper dapibus sit amet nec mauris. Nulla lectus orci, semper vitae tortor nec, semper efficitur metus. Quisque
        accumsan, enim vel sollicitudin feugiat, augue velit tincidunt lorem, ac elementum metus leo id tortor. Sed interdum diam mi, nec cursus ante malesuada vel. Sed eu eros eget nisl congue bibendum ut vitae mi. Fusce a mi vel enim dignissim tempor.
        Mauris rutrum, arcu sit amet bibendum suscipit, metus tortor imperdiet lectus, non cursus felis risus sit amet tortor. Nullam eu ex a sapien faucibus vulputate vitae eu eros. Proin in enim blandit erat malesuada tincidunt at eu libero. Maecenas
        lacinia leo nibh, at pharetra quam iaculis ac. Nunc rutrum purus massa, sit amet rutrum nulla rhoncus sagittis. Duis varius felis eu nisi mattis venenatis. Etiam sit amet suscipit quam, sit amet ultrices dui. Etiam dapibus mollis orci, sed ultricies
        elit ornare et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci elit, vehicula et maximus non, posuere eu diam. Aenean quis cursus ipsum, sed mollis quam. Phasellus malesuada lacus
        at lacus lacinia imperdiet. Praesent hendrerit lacus at enim consequat, vel ultricies tellus laoreet. Etiam consectetur fringilla ipsum vel blandit. Morbi vehicula ante vel aliquet tincidunt. Vivamus dapibus blandit sodales. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros ac nunc maximus pulvinar et id enim. Proin dignissim metus vitae placerat vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan
        hendrerit magna, eu porta dolor lacinia non. Ut ultrices aliquam arcu, non dictum turpis maximus a. Proin lacinia viverra nisi, ac interdum sapien. Aliquam facilisis et erat ac efficitur. Nulla sem diam, vulputate eget elit ut, porta viverra quam.
        Sed tincidunt augue eu odio volutpat, nec volutpat turpis scelerisque. Mauris at ex nunc.
      </p>
    </div>
  </div>
</div>

Answer 4

Incorporating Mr.Alien's suggestion, you have the option to utilize either table-cell; or flex.

All jQuery has been removed and replaced with the necessary CSS to achieve this by using display: table-cell;.

Modifications in CSS

#innerwrapper {
  width: 66.66%;
  margin: auto;
  display: table; /* Removed floats and added display table to parent */
}

#innerwrapper .sidebar {
  width: 15%;
  background-color: #DFE2DB;
  display: table-cell;  /* Removed floats and added display table-cell */
}

#innerwrapper > .content {
  width: 85%;
  display: table-cell;/* Removed floats and added display table-cell */
}

Demonstration incorporating changes

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
}
html {} body {
  background-color: #191919;
}
header {} #title {
  font-family: serif;
  font-size: 1.1em;
  margin: auto;
  width: 66.66%;
  color: #DFE2DB;
  height: 6em;
}
#navwrapper {
  background-color: #FFF056;
}
#navwrapper .menu {
  font-size: 1.1em;
  font-family: sans-serif;
  margin: auto;
  width: 66.66%;
}
#navwrapper li {
  background-color: #E6D84D;
  padding: 0.1em 0.5em;
  display: inline-block;
}
#mainwrapper {
  background-color: #FFFFFF;
}
#mainwrapper:after {
  content: "";
  display: table;
  clear: both;
}
#innerwrapper {
  width: 66.66%;
  margin: auto;
  display: table;
}
#innerwrapper .sidebar {
  width: 15%;
  background-color: #DFE2DB;
  display: table-cell;
}
.sidebar .menu li {
  display: block;
}
#innerwrapper > .content {
  width: 85%;
  display: table-cell;
}

<header>
  <div id="title">
    <h1>Something</h1>
  </div>
</header>
<div id="navwrapper">
  <div class="menu">
    <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
      <li>Test 4</li>
      <li>Test 5</li>
    </ul>
  </div>
</div>

<div id="mainwrapper">
  <div id="innerwrapper">
    <div class="sidebar">
      <div class="menu">
        <ul>
          <li>Test 1</li>
          <li>Test 2</li>
          <li>Test 3</li>
          <li>Test 4</li>
          <li>Test 5</li>
        </ul>
      </div>
      <div class="content">
        Phasellus quis libero eros. Maecenas at mauris ornare, vestibulum nulla sit amet, blandit mauris. Pellentesque ut luctus magna, vitae aliquam diam. Nam egestas urna quam, ac tincidunt lorem ornare non. Morbi non leo at enim lacinia tincidunt.
      </div>
    </div>
    <div class="content">
      <p>
        Integer quis auctor nibh, in pellentesque mi. In et rutrum mauris. Suspendisse rutrum bibendum arcu, non molestie orci iaculis id. Praesent ornare eros at nibh bibendum congue. Aliquam erat volutpat. Etiam sit amet ipsum eget lectus lobortis viverra ac
        sed dolor. Nunc tortor dolor, semper ac lobortis quis, ornare iaculis mauris. Donec convallis quis risus nec suscipit. Aenean vitae tempus sem. Nunc id sollicitudin leo, eu malesuada leo. Cras scelerisque, libero non tristique sollicitudin, metus
        lectus eleifend tellus, ac semper odio magna lacinia ex. Vestibulum ante libero, porttitor a turpis eget, mattis blandit ipsum. Nulla et ipsum vel mi aliquet porttitor non in enim. Sed nec nibh bibendum, facilisis lorem vel, tempus nisi. Sed cursus
        purus ac elit pulvinar, in fringilla quam eleifend. Fusce non commodo velit, eu tempus nisi. Phasellus lacus lorem, consectetur at metus ut, auctor pretium dui. Vestibulum elit diam, blandit ut neque vitae, tempor mollis ipsum. Vestibulum nec
        justo a augue mattis consectetur. In hac habitasse platea dictumst. Cras pharetra nisl eu nulla tempor convallis. Maecenas volutpat consequat luctus. Cras consequat, ligula in ullamcorper egestas, diam sapien aliquam quam, sed iaculis orci odio
        id dolor. Integer in dui vestibulum, dictum turpis mollis, rhoncus nisi. In hac habitasse platea dictumst. Praesent id velit euismod, molestie mi eu, volutpat metus. Quisque rhoncus ante id lectus accumsan, scelerisque consectetur velit efficitur.
        Maecenas aliquet fringilla feugiat. Aenean feugiat nulla ac tortor elementum, vel ultrices urna malesuada. Mauris et metus id velit semper dapibus sit amet nec mauris. Nulla lectus orci, semper vitae tortor nec, semper efficitur metus. Quisque
        accumsan, enim vel sollicitudin feugiat, augue velit tincidunt lorem, ac elementum metus leo id tortor. Sed interdum diam mi, nec cursus ante malesuada vel. Sed eu eros eget nisl congue bibendum ut vitae mi. Fusce a mi vel enim dignissim tempor.
        Mauris rutrum, arcu sit amet bibendum suscipit, metus tortor imperdiet lectus, non cursus felis risus sit amet tortor. Nullam eu ex a sapien faucibus vulputate vitae eu eros. Proin in enim blandit erat malesuada tincidunt at eu libero. Maecenas
        lacinia leo nibh, at pharetra quam iaculis ac. Nunc rutrum purus massa, sit amet rutrum nulla rhoncus sagittis. Duis varius felis eu nisi mattis venenatis. Etiam sit amet suscipit quam, sit amet ultrices dui. Etiam dapibus mollis orci, sed ultricies
        elit ornare et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci elit, vehicula et maximus non, posuere eu diam. Aenean quis cursus ipsum, sed mollis quam. Phasellus malesuada lacus
        at lacus lacinia imperdiet. Praesent hendrerit lacus at enim consequat, vel ultricies tellus laoreet. Etiam consectetur fringilla ipsum vel blandit. Morbi vehicula ante vel aliquet tincidunt. Vivamus dapibus blandit sodales. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros ac nunc maximus pulvinar et id enim. Proin dignissim metus vitae placerat vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan
        hendrerit magna, eu porta dolor lacinia non. Ut ultrices aliquam arcu, non dictum turpis maximus a. Proin lacinia viverra nisi, ac interdum sapien. Aliquam facilisis et erat ac efficitur. Nulla sem diam, vulputate eget elit ut, porta viverra quam.
        Sed tincidunt augue eu odio volutpat, nec volutpat turpis scelerisque. Mauris at ex nunc.
      </p>
    </div>
  </div>
</div>

Making the height of two divs equal within the same parent element using CSS

Answer №1

Answer №2

Similar questions

Downloading multiple files concurrently in Flask

Enhance functionality in JavaScript by accessing the return value from a function

Searching for an attribute with no value in an HTML tag using Selenium: A step-by-step guide

Learn how to retrieve the current input value from a repeating form using Jquery

.toggleClass malfunctioning inexplicably

Using CSS/HTML to showcase rows in a vertical table format (or similar)

How about incorporating AJAX into your HTML code?

The pseudo-class for invalid input triggers CSS invalidation, even when the input field is left blank

Struggling with aligning mat-icon in the center using HTML and CSS?

The PHP form is failing to successfully submit due to a custom error message occurring

The sidebar made an unexpected leap from one side to the other, with no memory of ever tampering

The CSS file is not appearing, causing the styling not to be applied

Is there a way to insert a record upon the user clicking on the Add Record button?

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

Update the gulp watch function to use gulp@4

Tips for minimizing excess white space in Shiny applications

If the Ajax request is successful, scroll to the bottom of a Div using jQuery

Browsing a container with JavaScript

Arranging elements in columns using Bootstrap

Leveraging ng-class with an Angular $scope attribute