0

I have a center aligned with 1060px width. Within this, I have two more divs as and with different background color/images and width of 260px and 800px respectively. Now I need to make the height of the two child divs same, irrespective of the content inside them. If “child1” has huge content and we need to scroll down the browser to see it and “child2” has less content, then also “child2” should have the height extended to match with the “child1”. On the other hand if both “child1” and “child2” has less content and does not produce browser scroll, then both of the should occupy the height of the browser window. The code snippet is given below. 

<html>
    <head>
    <style type="text/css">
        * { margin:0; padding:0; }
        .parent { clear:both; margin:auto; width:1060px; }
        .child1 { background-color:#999999; float:left; width:260px; }
        .child2 { background-color:#99CC00; float:left; width:800px; }
        .child1a, child2a { float:left; width:100%; }
        .child2a { border-bottom:1px solid #000000; height:500px; }
    </style>
    </head>

    <body>
    <div class="parent">
        <div class="child1">
            <div class="child1a">1</div>
            <div class="child1a">2</div>
            <div class="child1a">3</div>
        </div>
        <div class="child2">
            <div class="child2a">1</div>
            <div class="child2a">2</div>
            <div class="child2a">3</div>
        </div>
    </div>
    </body>
</html>

Is it possible to solve it using only CSS, or need to use JavaScript?

user1144830
  • 39
  • 1
  • 9
  • Did you check solution in this question ? --> http://stackoverflow.com/questions/873781/how-to-make-floating-inner-divs-the-same-height-as-the-highest-div – rt2800 May 09 '12 at 07:55
  • Thank you for your reply. I had seen this site, but my site is a very image heavy and i need a CSS solution. Plase help. – user1144830 May 09 '12 at 08:58

1 Answers1

0

You can do using 'display:table-cell' .

http://jsfiddle.net/sWHKs/

Sinan AKYAZICI
  • 3,942
  • 5
  • 35
  • 60
  • That's because you don't have a doctype to trigger standards mode as the first line. Prepend ` `. – thirtydot May 09 '12 at 09:10
  • Thank u. If both the divs have less content then also the should should occupy the browser window. Plase tell me how to do that using display:table-cell property. – user1144830 May 09 '12 at 09:42