<div class="sj-fill-top sampleSection">Header</div>
<div class="sj-fill-bottom sampleSection">Footer</div>
<div class="sj-fill-left sampleSection sampleSectionLeft">Menu</div>
<div class="sj-fill sampleSection">Body</div>


SubtractJS is a tool for creating quick and easy fixed-width layouts.

SubtractJS works by taking a defined space and "subtracting" an element from it to produce a smaller defined space.

A commonly-requested layout I have encountered when developing line-of-business web sites is a request to have a fixed-height header/toolbar at the top, a fixed-width menu on the left, and a fixed-height footer at the bottom, with the rest of the page dedicated to the specific application function.

This looks something like this:

Header
Footer
Menu
Body

Header

With SubtractJS, this is simple. First, you specify the header div (you could also use another tag, such as "header"). This looks like this:

<div class="sj-fill-top">Header</div>

Header
 


Footer

Now you have a decision to make. Do you want the left menu to extend from the header to the bottom of the page? Or do you want the footer to fill the entire width of the page. If you specify the left menu next, it will fill the entire left of the remaining area; however, if you specify the bottom section next, it will fill the width of the entire page, just as our specifications call for.

Header
Menu
Footer
 
Menu First Option
Header
Footer
Menu
 
Footer First Option

As you can see, we need to specify our footer next to match our specifications. Now our html looks like this:

<div class="sj-fill-top">Header</div>
<div class="sj-fill-bottom">Footer</div>


Header
Footer
 

Menu

Next we need to specify that our menu section will fill the entire height of the left side of our remaining portion. Layout sections that specify fill-left or fill-right must specify a width.

For fill-top or fill-bottom, the browser's layout engine will pick an appropriate default height based on the content, or you can specify a height, but with fill-left or fill-right, the default width will be about 100%, leaving no space for your body section. I usually prefer to define the width in the style sheet but for expediency, we can specify it here.

Our html becomes: <div class="sj-fill-top">Header</div>
<div class="sj-fill-bottom">Footer</div>
<div class="sj-fill-left" style="width: 40px;">Menu</div>

Header
Footer
Menu
 


Body

Finally, we add a section that will use all of the remaining space. This section will resize relative to the browser size. And our final html is: <div class="sj-fill-top">Header</div>
<div class="sj-fill-bottom">Footer</div>
<div class="sj-fill-left" style="width: 40px;">Menu</div>
<div class="sj-fill">Body</div>


Header
Footer
Menu
Body