Make Two Divs The Same Height? #2

I made this topic earlier and a solution has been suggested, but for some reason it doesn't work and I hope to find some further help. I want to make two DIVs the same height (so w

Solution 1:

Is this what you are trying to do?

I tried using display:table & display: table-cell;.

CSS

#kasticketProducts{
    overflow:hidden;
    width:250px; /* for testing only */display: table;
}
.aProductHeader{
    display: table-cell; 
    background: #cac;
}

.aProduct{
    background: #cec;
    display: table-cell;     
}

Check this blog for more info.

Solution 2:

You can try this... Actually header has margin so write CSS for h3 as

h3 {
margin: 0;
}

If above is working then try below structure..

<div><divclass="aProductHeader"><divclass="omschrijving"><h3>omschrijving</h3></div></div><divclass="aProduct"><divclass="omschrijving"><spanclass="entry inner">
            Toddler bestek blauw
        </span></div></div></div>

and add this CSS to your CSS

.aProductHeader.omschrijving {
    background: #cac;
    min-height: 30px;
}
.aProductHeader {
    float: left;
}
.aProduct {
    overflow: hidden;
}
.aProduct.omschrijving {
    background: #cec;
    min-height: 30px;
}
h3 {
    margin: 0;
}

working example http://jsfiddle.net/e6ba3/

Solution 3:

.aProduct{background-color: #FFFFFF;border-left: 1px solid #E6E6E6;border-right: 1px solid #E6E6E6;position: relative;} .aProductHeader{border-top: 1px solid #CA542B;float: left;min-height: 65px;padding-bottom: 4px;padding-top: 4px;position: relative;text-shadow: 1px 1px 1px #000000;width: 70px;z-index: 2;}.wrap{border-radius: 0 0 0 5px;bottom: 0;left: 0;margin: 0;padding-right: 1px;position: absolute;top: 0;width: 70px;z-index: 1;} 

Wtrite your html
  <div class="wrapper" style="position:realtive;border:1px solid red;"> 
    <div class="wrap"></div>
    <div calss="aProductHeader">xxxxx</div><div class="aProduct">xxx</div>
  </div>

Solution 4:

No need to write Javascript/jQuery, you can achieve this through CSS.

It will be flexible, and keep both div height same.

Here is Code:

HTML:

<divclass="main"><divclass="aProductHeader"><divclass="omschrijving"><h3>omschrijving</h3></div></div><divclass="aProduct"><divclass="omschrijving"><spanclass="entry inner">
                Toddler bestek blauw
            </span><spanclass="entry inner">
                Toddler bestek blauw
            </span><spanclass="entry inner">
                Toddler bestek blauw
            </span><spanclass="entry inner">
                Toddler bestek blauw
            </span><spanclass="entry inner">
                Toddler bestek blauw
            </span><spanclass="entry inner">
                Toddler bestek blauw
            </span></div></div></div>

CSS:

.main { position:relative; display:table;}
.aProductHeader.omschrijving {
    background: #cac;
    min-height: 30px;
    float:left;
    width:150px;
    position:absolute; left:0; top:0; bottom:0;
}

.aProduct.omschrijving {
    background: #cec;
    min-height: 30px;
    float:left;
    width:200px;
    margin-left:160px;
}

Enjoy !!!