Notes on Web Page Coding
Jello CSS layout
The width of pages on nearly all web sites fall into two categories, fixed width, where the content at the edges may not be visible in narrow browsers and where there are acres of blank space on the sides of the content in wide browser windows. The alternate method is to have a fluid layout where the page extend to fill the width of the browse window and all the content 'flows to stretch across the page. This works well on narrow pages but looks unnaturally stretched on wider windows.
The width of the pages on this site vary according to the width of the browser window displaying the page but don't stretch all the way across of the wider pages. This style of layout was originally described by Mike Purvis in an article for 'PositionIsEverything". The 'not quite fluid" he named 'Jello Mold'.
Principles of Jello layout
Firstly the minimum width of the page must be chosen, 1000px is used here, complex elements like the Spectrum Analyser just won't squeeze down any smaller. Secondly the content should be centred.
To do this the body element is given left and right padding of 500px, so the strip down the middle of the body is the width of the window minus 1000px (see diagram). If the window width is less than 1000px, then the strip just shrinks down to 0px and stops there (viz).
The #sizer div element does the 'jello' magic of varying its width with browser width but only half as fast. Its width is set to be 50% of what's left after the 1000px minimum is taken away. The #sizer div is a child of the body element, so its containing box is this strip down the middle, the black area between the grey padding strips. The #sizer div width is set to 50%, i.e. 50% of the width of its containing box (viz), #sizer is shown in green.
The #expander div sets the actual width of the page content. If it is 1000px greater than the #sizer div, the content width will behave just as originally planned. The trick to making #expander this wide is to make it a child of the #sizer div but its left margin should be -500px i.e. #expander left edge is 500px to the left of the sizer left side. Similarly #expander right margin is set to -500px so its right side is 500px further to the right of the #sizer' right edge. Thus #expander' div has its minimum width 1000px, when sizer is stuck at 0px, and it is 1000px + 50% of what's left of the window width for larger windows (viz), #expander is shown in white.
The behaviour of the JELLO layout is demonstrated here for various browser window widths.
Two balanced columns
The actual content of each web page on this site uses a two column layout. The fixed width strip down the left holds site navigation links along with a brief description of each. The main, flexible width column to the right holds the individual page data. The total height of the page is set by which of the columns is the longer. To set the two columns to the height of the longer, the general method described in the Multi-Column Layout article.
A margin is applied on #content-holder div to reserve the space where the left column, the #sidebar div, will live. The width of the #sidebar is the same (or smaller) as the space made for it by this left margin. The #sidebar div is floated and has a negative left margin value equal to the width of the space provided so it can float up alongside the main content. Since both the #sidebar and #content-holder are floated, they adjust their heights to wrap their contents. The #sidebar wrap the navigation menu and the #content-container wraps the #content div and the #sidebar. The #content-container will stretch to the height of the longer of either the #sidebar or #content divs. A filler div with position:absolute is use to match the height of the #content-container and fill any gap at the bottom of the sidebar if its the shorter, this gives the appearance that both columns are the same height.