Child DIV change height to match other child DIV

Question

Hi,

I have scoured the internet looking for a solution to this and I am sure it is right under my nose. Will someone please help?

I have a parent div with two children. Each child has static widths and I need each one to change their height to match the other according to the content. In other words, If "child-div-a" is taller than "child-div-b, then "child-div-b" needs to automatically scale the same height of "child-div-a". I have been able to get the parent to scale to the largest child but not the other child. I cannot seem to get the left div (a) to always be the same height as the right/content div (b). You would think this would be very simple or maybe I'm an idiot.

Thank you in advance for all help.

Joshua

---

My probelm has been solved.

The first response I saw from japanPro contained a link to Ed Elliot's blog. That contained info on faux columns. I fairly simple concept that I can't believe I didn't see. It was all smoke and mirrors, but I was too focussed on the illusion to see how the trick can be done (if that makes any since). Here is the CSS I came up with:

#child-div-container{
    width: 800px;
    position: relative;
    overflow: hidden;
    background-image: url(../../../images/faux_column_bkground.gif);
    background-repeat: repeat-y;
    }

 #child-div-a{
    float: left;
    width: 125px;
    }

 #child-div-b{
    float: left;
    width: auto;
    height: 100%;
    margin-left: 5px;
    }

Thank you again to everyone who responded to my needs. Everyone gave viable information. I only hope I can develop my skils and knowledge to the point of offering advice instead of asking for it.

Joshua

Answer 1

Hey,

This is a very common problem in html/css. There's tricks to do this in Javascript, but I'm not sure if that's what you're looking for.

Two solutions for this problem that don't use javascript:

Faux Columns - Only works if the background of the column that has to stretch has only one background color or a repeating pattern (because it uses an image or border to fake a column). This might not work as well though when you can't predict with div will be taller.

Equal Height Columns - CSS trick that I haven't yet tested.

Answer 2

there is two way to do

• javascript way , use jquery equal height

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

• other way is using css

http://www.ejeliot.com/blog/61

Answer 3

I don't know of a good CSS-based answer for you. But you can accomplish this easily with jQuery.

Suppose you have the following markup

<div id="parent">
  <div>My content</div>
  <div>Other div with content</div>
</div>

Here's a jQuery plugin that lets you do this as simply as:

$("#parent div").equalHeights();

Answer 4

Here is a jquery method as I found on CSS Tricks an EXCELLENT resource!

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight =

$(this).height(); } });

$("div").height(maxHeight);