How do you get two Ivs to be the same height even if they have different content sizes?

Question

Hello,

How can I leave a <div> with dynamic height, that is, when the <div> with the content of the products grow the <div> that contains the menu also grow together, getting both the same height?

I made some attempts and did not succeed, I have it:

The div who accommodates my menu:

<aside id="sidebar" class="one-fourth">
  <div class="widget">
    <h3>Selecionados:</h3>
    <nav>
      <ul class="menu">
        <li><a href="#"><?php echo $row_rsDepartamento['descricao'];  ?> (<?php  echo $totalRows_rsProdutos; ?>)</a></li>
        <li class="current-menu-item"></li>                
      </ul>
    </nav>
  </div>
</aside>

The div that accommodates my products:

<div class="team-member one-fourth"> 
  <a href="detalhes.php?produto=<?php echo $row_rsProdutos['id_produto']; ?>&dep=<?php echo $row_rsProdutos['id_departamento']; ?>&subdep=<?php echo $row_rsProdutos['id_subdepartamento']; ?>"><img class="photo" src="<?php echo $foto; ?>"  /></a>
    <div class="content">
      <h3 class="name"><?php echo $row_rsProdutos['descricao'];  ?> </h3>
      <span class="job-title"> <?php echo $row_rsProdutos['codigo_msb']; ?>     </span> 
    </div>
</div>

The css I tried to change got like this:

#sidebar .widget {
    margin-bottom: 30px;
    width: 210px;
    min-height: 600px;
    height: auto;
}

.team-member {
    text-align: center;
    margin-bottom: 20px;
}

.one-fourth {
    width: 23.5%;   
    max-width: 220px;
    height: auto;
}

But unfortunately I couldn’t solve.

The site for a demo can be found here: Website

Answer 1

Hello,

There are several techniques to make the height of a <div> automatically fits with the height of another. One of the most interesting I’ve seen lately is this: Two Equal Height Columns Layout.

But for the type of layout you are creating advise using a simpler technique. Create a <div> around the products and apply a margin to the left of the size of your sidebar.

Example:

<div class="team-wrapper">
    <div class="team-member one-fourth"> 
        <!-- Conteúdo do produto 1 -->
    </div>
    <div class="team-member one-fourth"> 
        <!-- Conteúdo do produto 2 -->
    </div>
</div>

And the CSS goes like this:

.team-wrapper {
    margin-left: 23.5%;
}

I hope this works out for what you want to do.