Left Div and Right Div should be Equal in Height..!

Question

Two requirement i have.

1. Left div have to be the same height as right div

2. I need a footer div.

and this is the code.

HTML

<div id="base">
    <div id="leftleft">left
        <br/>I WANT THIS HEIGHT TO BE SAME AS RIGHT DIV
        <br/>
    </div>
    <div id="rightright">RIGHT DIV HEIGHT WILL BE
        <br/>CHANGED DYNAMICALLY.
        <br/>I WANT TO MATCH THE LEFT
        <br/>AND RIGHT DIV HEIGHT EQUALLY.
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>right
        <br/>
    </div>
    <div id="footer">
        this has to be in the bottom
    </div>
</div>

CSS

#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
    float:left;
}
#rightright {
    display: table-cell;
    float:left;
}
#footer{
    clear:both;
}
#base {
    height: 100%;
    display: table;
    position:relative;
}

Fiddle,

Demo in Fiddle

If I put float:left the footer goes down, but the left div height doesn't match.

if i delete float:left the footer div doesn't go down :(

Answer 1

You can try this approach.

Add height:100% to body and html(for ensure all div inside body can inherit the height).

body,html{height:100%;}

Good Luck!!

Answer 2

how about using min-height in CSS of each DIV

min-height: 300px

Sample

OR

use table. In table, td tags are always in same width and height.

Answer 3

Try this code

Remove float:left;

As like this code

#base {
    height: 100%;
    width:100%;
    display: table;
}
#leftleft {
    background: #1B8BC6;
    width: 100px;
    height: 100%;
    display: table-cell;
   vertical-align:top;
}
#rightright {
    display: table-cell;
  vertical-align:top;
}
#footer{
    display:table-row;
    width:100%;background:red;
}

Demo

Answer 4

use <table>

<table>
<tr>
<td>Left Div
</td>
<td>Right Div
</td>
</tr>
</table>

<footer>Footer</footer>