How to make two divs have the same height even though they have different size content?

Navigation
1

Hello,

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

I made a few attempts and I did not succeed, I have this:

The div that 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 that I tried to change looked 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 could not solve it.

The site for a demo can be found here: Site

    
asked by anonymous 09.01.2015 / 02:27

1 answer

2

Hello,

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

But for the type of layout you are creating I would 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 looks like this: 

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

I hope this works for what you want to do.

    
09.01.2015 / 02:50
How to write SELECT result? Write only one field in the database