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

NextJS application failing to display SVG icon in the absence of internet connection

The React MUI v5 Card's background features a subtle white hue with a 5% opacity, leaving me curious about its origin

Collapsing borders in JavaFX 8

A common inquiry: how can one pinpoint a location within an irregular figure?

Incorporating existing CSS styles into a new CSS file

Highcharts 3D Pie Chart with Drilldown Feature

Is it possible for Bootstrap to hide a grid column on extra small screens by setting its column width to zero?

Menu that sorts items based on a specified range of values entered by the user

Troubleshooting issue with parsing MySQL data in HTML table using Node.js

Troubleshooting JavaScript for Sidebar Disappearance due to marginRight and display CSS Issue

The HTML document is having trouble establishing a connection with socketio

Creating a new element in jQuery and placing it at the position where an element has been dragged

"Enhancing User Interaction: The Dynamic Trio of Ajax, Php, and MySql in Comment

What is the best way to locate and list all video links, and include options for "Play Video" and "Download Video"?

How can you utilize CSS to automatically generate section numbers, specifically for multiple sections?

Is Fullpage.js functioning only on local servers?

AngularJS: Modifying values in one div updates data in all other divs

Simple Mobile-Friendly Tabs - mobile tabs are always visible

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Troubleshooting the Issue: Iscroll.js Child Element Overflow Scroll Problem on iOS Devices