Html/css: Making two floating divs the same height

Flexbox Explained

Dig deeper into the flexbox layout and you'll never look back. Fine-tune your layouts and navigate different use cases confidently.

Control with Flex-Grow and Flex-Basis

Control height adjustments using flex-grow and flex-basis. Set flex-grow to 1 for equal growth, and flex-basis to 0 to start with no width:

.flex-container {
  display: flex; /* There's always a "flex" in "flexibility" */
}

.flex-child {
  flex-grow: 1; /* Spread growth equally, like sharing a pie */
  flex-basis: 0; /* We start small, like a baby turtle */
}


Checking Browser Compatibility

Ensure your solution plays nicely across all modern browsers. Autoprefixer is your ally in dealing with vendor prefixes:

The JavaScript Solution

For more dynamic layouts or uncontrollable markup, leverage JavaScript or jQuery to manage column heights on the fly:

// Following the highest peak like a mountain climber
const tallestHeight = Math.max(...Array.from(document.querySelectorAll('.column')).map(div => div.offsetHeight));
document.querySelectorAll('.column').forEach(div => div.style.height = `${tallestHeight}px`);


Other Methods and Potential Pitfalls

Not all scenarios allow the use of Flexbox, or you may encounter legacy browsers. Here's how to handle such conditions:

Using Display: Table-Cell

Before Flexbox invaded our code editors, display: table-cell was on the throne. Though it's not responsive-friendly, it works for equal height divs:

<div style="display: table-row;">
  <div style="display: table-cell; background: lightblue;">Box 1</div>
  <div style="display: table-cell; background: lightgreen;">Box 2</div>
</div>


The Good Old Padding and Margin Trick

For equal height divs, another hack uses bottom padding and negative margin. This trick extends the padding for the shorter column while sweeping the excess under the rug with a negative margin:

.container { overflow: hidden; } /* Hide is the best game */
.column { float: left; width: 50%; padding-bottom: 9999px; margin-bottom: -9999px; } /* Yes, this is a magic number */


Writing Clean and Valid Code

Maintain valid HTML and CSS, for the sake of readability, maintenance, and cross-browser compatibility.

Advanced Techniques and Best Practices

Master these techniques and you'll handle layout issues in your sleep!

Embracing Responsive Design

In a world dominated by screens of many sizes, responsive design is king. Use percentage-based widths with Flexbox, and media queries to perfectly scale content across devices:

@media (max-width: 768px) { /* Hey small screens! */
  .flex-container {
    flex-wrap: wrap; /* Time to stack up folks! */
  }
  .flex-child {
    flex-basis: 100%; /* Full width for all of you */
  }
}


Meeting the end

Regardless of the method you use, everyone loves crafting a perfect layout. If you find this answer helpful, vote and spread the knowledge. Good luck with your coding adventures!👩‍💻