CSS sizing

[wkeese]

Try to do sizing completely in CSS, rather than in javascript.

Hopefully this can be done by:

1. Using percentages rather than hardcoded pixel values. The exceptions would be

   a. vertical positioning in ColumnView (which is controlled by this.hourSize)
   b. vertical positioning within a row of overlapping events in GridView (which is controlled by font-size or the height a HorizontalRenderer)

2. Using CSS flex-blox sizing instead of <table> elements. IIUC with flex-box you can set a fixed percentage height for each row/column, regardless of the amount of content in that row/column. And you can still do animation to for that feature of expanding a certain row of the GridView (http://stackoverflow.com/questions/11106876/is-it-possible-to-animate-flexbox-inserts-removes)

Note that widget height changes are handled differently for GridView and ColumnView. The ColumnView maintains the same scrollHeight regardless of the offsetHeight of the widget; there's just more scrolling. Whereas in GridView, each <table> cell and Renderer changes size and position as the widget itself changes size.

Changes in width affect the sizes and positions of elements in both GridView and ColumnView.

[wkeese]

Turns out that SimpleColumnView#_layoutVerticalItems() already uses percentages for setting left and width. SimpleColumnView#_layoutInterval() needs to be updated though to stop using this.itemContainer.offsetWidth.

Matrix view is still using hardcoded pixel values though.

(And the code is still using <table>s everywhere too, although those don't preclude CSS sizing.)

Tested on dcalendar/tests/calendar.html.