Update to layout and CSS

By Murray Bourne, 16 Apr 2007

I have been wanting to re-design the layout of Interactive Mathematics for some time.

So a few weeks back I decided to give up on the old design for my 2-column layout. Many complications arose from that simple decision, but anyway, I persisted because I like a challenge.

The updated site needed to obey the following:

  1. Liquid layout, which caters for screen resolutions from 800x600 upwards.
  2. The maximum width of the page is 960px (so columns don't become too wide on large monitors).
  3. Able to cope with wide content (A lot of the images and Flash interactives are wider than 800px allows for. IE6 expands the containing DIV to fit the content, IE7 and Mozilla browsers do not, as per W3C recommendations). I used a PHP variable to handle this aspect.
  4. Properly floated DIVs (as opposed to vertically positioned DIVs)
  5. Of course, HTML and CSS compliant
  6. A minimum of IE hacks
  7. Enhanced usability
  8. Simplified CSS (it was overly complicated before)
  9. Use best-practice principles from Russ Weakley's workshop

Do any of the users notice or care? Most likely not, but it should be a better user experience for them.

Footnote: The only "hacks" used are the following for the #wrapper DIV width:

/* Only Mozilla-based browsers understand this... */
#wrapper {

/* Only IE browsers understand this... */
#wrapper {
    document.body.clientWidth < 980 ?
    "960px" );

Each one can only be understood by the browser type it is aimed at. The Mozilla one is proper CSS, but IE doesn't understand it. The IE "expression" (which works like an "if" decision) is actually more convenient for my application, so I used it. This aspect is not as future-proofed as I would like, but it works for now.

See the 1 Comment below.

One Comment on “Update to layout and CSS”

  1. alQpr » Blog Archive » squareCircleZ » Update to layout and CSS says:

    [...] Someone else has also been working on layout. I’ll have to compare notes. [...]

Leave a comment

Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can't mix both types of math entry in your comment.