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: 
Seems like you are try to do a sticky footer, well... you will need a few hacks:

HTML:
-----

```
<div id='container'>
   <div class="header">
      <h1>Sticky Footer!</h1>
   </div>
   <div id='rowOne'>row 1</div>
   <div id='rowTwo'>row 2</div>
   <div id='rowThree'>row 3</div>
   <div class="push"></div>
</div>
<div id='footer'></div>

```

CSS
---

```
.container {
   min-height: 100%;
   height: auto !important;height: 100%; 
   /* the bottom margin is the negative value of the footer's height */
   margin: 0 auto -142px;
}
.footer, .push{
   height: 142px; /* .push must be the same height as .footer */
}

```

**Note:** Replace the footer and push height for your fixed height and don't forget to insert the push div after the rows in the container.
Have you tried looking at a CSS framework? They come with default classes you can use to set up something like that within a few short minutes. They also help producing cleaner html and interfaces that you can easily redesign at a later time.

<http://twitter.github.com/bootstrap/index.html>