Question: I am trying to make 3 div's in row design. Where the header and footer have fixed height. 
The center div expands to fill the empty space. I have tried but the closest I got is the code below. Still having problems with the center div which expands over the footer div. 

html:

```
<div id='container'>
    <div id='rowOne'>row 1</div>
    <div id='rowTwo'>row 2</div>
    <div id='rowThree'>row 3</div>
</div>

```

css:

```
#rowOne {
    width: 100%;
    height: 50px;
    background: green;
}
#rowTwo {
    width: 100%;
    background: limegreen;
    height:100%;
    overflow:hidden;
}
#rowThree {
    width: 100%;
    position: fixed;
    clear: both;
    background: green;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
}
#container {
    height: 100%;
}

```

![enter image description here](https://i.stack.imgur.com/Ig6pV.png)

Answer: 
This is a very common problem, one of the solutions that worked for me is from the following website:

<http://ryanfait.com/sticky-footer/>

with the code: 

<http://ryanfait.com/sticky-footer/layout.css>

and another popular choice:

<http://www.cssstickyfooter.com/>

If this does not meet your needs, let us know, we can help more.
This should exactly do what you want:

### html code:

```
<div id="header">
    header
</div>
<div id='container'>
    <div id='rowOne'>one</div>
    <div id='rowTwo'>two</div>
    <div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
    footer
</div>

```

### CSS code:

```
.clearfix {
    clear: both;
}
#header, #footer {
    background-color: red;
}
#container {
    width: 100%;
}
#rowOne {
    width: 25%;
    background: green;
    float: left;
} 
#rowTwo {
    width: 55%;
    height: 100px;
    background: limegreen;
    float: left;
}
#rowThree {
    width: 20%;
    background: green;
    float: left;
}​

```

You can also test it on [jsFiddle](http://jsfiddle.net/Vz9RL/1/)