Question

I’ve been looking around and I can not find anything that solve this problem.

I have a container div, inside this one, I have few floated div, their content is generated dynamically and can vary from few words to almost a page. this basically create a line of a table (I do not want to use table layout for some reasons).

I successfully made the container expand to the bigger of the content using overflow:hidden;

Now I would like all my divs to adapt to the container height.

Answer 1

you can set a class to all the div’s inside the container … let’s say class="contained"

then you can add a js function to run when the document is generated that finds the max-height of all the contained div’s and sets the same height to all the others.

  $(function() {
      var maxheight=0;
      $(".contained").each( function ()  {
          if (maxheight<$(this).height()
          maxheight=$(this).height();
      });
      $(".contained").each( function ()  {
      $(this).height(maxheight);
      }); 
}