I'm working on a browser app. I have read about a couple of dozen pages about the **DIV** tag. I just can not get it to work. I know I should use CSS but I will incorporate that at the end after I get some other things done.

Basically I want a header and a footer. Then a fixed width side bar and the rest to be filled with a content area. I almost got it but the sidebar starts too low (it should be the same height of the content) and the content does not expand to fit the width of the browser.

Here is what I have got:

```html
<header style='background-color:#013499; height:60'>

  <br>
  <span style='color:white'>&nbsp &nbsp Whole Number</span>
  <select>
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</header>

<div>
  <div style='display:inline-block; background-color:#7690C5; width:200'>
    Task1
    <br>Task2
    <br>
  </div>
  <div style='display:inline-block; background-color:#F2F2F2'>
    Top
    <br>Content
    <br>Bottom
  </div>
</div>

<footer style='background-color:#013499; height:60'>

  <br>
  <form name="Actions" action="test.html" method="post">
    &nbsp &nbsp
    <input type="submit" name="send_button" value="Save">&nbsp &nbsp
    <input type="submit" name="send_button" value="Cancel">
  </form>

</footer>
```

I found [this post](https://stackoverflow.com/questions/10464716/div-expand-to-visually-fill-vertical-space) which helped a lot. But it is still not right. I cant seem to find any documentation that explains how these things work together.

I cant figure out how to get the content to fill up the remaining space. It ends up too short (sizing to the actual content) or extending beyond the screen size because at 100% it includes the width of the sidebar. I know whats going wrong but I do not know how to make it right.

I moved the styles out of the HTML now.

```html
html, body {
    height: 100%;
 margin: 0;
}

header {
    width: 100%;
    height: 60px;
    background-color: #013499;
 margin: 0;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -60px 0; /* the bottom margin is the negative value of the footer's height */
    position: relative;
}

#sidebar {
    background-color: #7690C5;
    width: 300px;
    height: auto !important;
    bottom: 60px;
    top: 60px;
 display: inline-block;
 position: absolute;
}

#content {
    background-color: #F2F2F2;
    width: 100%;
    height: auto !important;
    bottom: 60px;
    top: 60px;
    margin-left: 300px;
 display: inline-block;
 position: absolute;
}

footer {
    margin: -60px 0 0 0;
    width: 100%;
    height: 60px;
    background-color: #013499;
}

#buttons {
 margin-right: 20px;
 text-align: right;
}

<!DOCTYPE HTML>
<html>
<head>
<title>Viewer test</title>

 <link rel=Stylesheet Type='text/css' href=ERP.css> 

</head>
<body>

 <div id="wrapper">

  <header>

   <br>
      <span style='color:white'>&nbsp &nbsp Whole Number</span>
      <select>
       <option value=""></option>
       <option value="1">One</option>
    <option value="2">Two</option>
      </select>

     </header>

  <div id="sidebar">
       Task1<br>
       Task2<br>
  </div>

     <div id="content">
       Content
  </div>

 </div>

    <footer>

     <br>
  <form id='buttons' name="Actions" action="test.html" method="post">
      <input type="submit" name="send_button" value="Save">&nbsp &nbsp
      <input type="submit" name="send_button" value="Cancel">
  </form>

    </footer>

</body>
</html>
```