<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
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>
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.
Menu First Option
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>
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>
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>