Center Elements Vertically Without Tables
The drive to eradicate tables from page layout has two arguments: tables are inherently semantic, and we should care about the semantics of our documents; table markup is difficult to deal with - table-based style hooks cannot be easily changed. Not everyone is worried about the first point, but anyone who has ever needed to change the style of a page appreciates the second.
Ideally style hooks (for this article we will use this term to refer to elements that are inserted into html purely for reasons of style), even though they be inserted only when absolutely necessary, should be simply neutralisable from a stylesheet. For example, using the nonsemantic div element for stylehooks and applying to them a 'stylehook' class, as Waxpad does, means that styling that class with the appropriate neutral properties can effectively remove all those elements from the layout of the document. This is not so easy to do with tables.
Fortunately most kinds of layout do not require any style hooks, and almost every kind of layout you could want can be achieved with a handful of nonsemantic, easily neutralisable divs. Most of these techniques are obvious, but proper vertical centering is not.
By proper vertical centering we mean an element sitting in a container that is dynamically positioned so that its horizontal center line coincides with horizontal center line of its container, unless it is taller than its container, in which case its top coincides with the top of its container.
The technique:
Wrap the element to be centered in a vertseed div. Set the element's top to be minus half of its height.
Wrap the vertseed in a vertcase div. Set the vertseed's top to be 100% of its parent's height.
Put the vertcase inside the container element. Set the vertcase's height to be at minimum half of the centered element's height, and at maximum half of the vertcase's parent's height.
Once this is done, with appropriate hacks for Internet Explorer (which does not implement minimum and maximum heights), vertical centering is achieved. If these style hooks were ever to be neutralised, it would be done by setting them all absolutely positioned and 100% sized so that they filled the container, and the element that was centered would find itself in an environment exactly the same as if the style hooks were not there.
These steps, and many other alignment options, are implemented automatically when selected in Waxpad. Example.
Comments
Back to Waxpad
The drive to eradicate tables from page layout has two arguments: tables are inherently semantic, and we should care about the semantics of our documents; table markup is difficult to deal with - table-based style hooks cannot be easily changed. Not everyone is worried about the first point, but anyone who has ever needed to change the style of a page appreciates the second.
Ideally style hooks (for this article we will use this term to refer to elements that are inserted into html purely for reasons of style), even though they be inserted only when absolutely necessary, should be simply neutralisable from a stylesheet. For example, using the nonsemantic div element for stylehooks and applying to them a 'stylehook' class, as Waxpad does, means that styling that class with the appropriate neutral properties can effectively remove all those elements from the layout of the document. This is not so easy to do with tables.
Fortunately most kinds of layout do not require any style hooks, and almost every kind of layout you could want can be achieved with a handful of nonsemantic, easily neutralisable divs. Most of these techniques are obvious, but proper vertical centering is not.
By proper vertical centering we mean an element sitting in a container that is dynamically positioned so that its horizontal center line coincides with horizontal center line of its container, unless it is taller than its container, in which case its top coincides with the top of its container.
The technique:
Wrap the element to be centered in a vertseed div. Set the element's top to be minus half of its height.
Wrap the vertseed in a vertcase div. Set the vertseed's top to be 100% of its parent's height.
Put the vertcase inside the container element. Set the vertcase's height to be at minimum half of the centered element's height, and at maximum half of the vertcase's parent's height.
Once this is done, with appropriate hacks for Internet Explorer (which does not implement minimum and maximum heights), vertical centering is achieved. If these style hooks were ever to be neutralised, it would be done by setting them all absolutely positioned and 100% sized so that they filled the container, and the element that was centered would find itself in an environment exactly the same as if the style hooks were not there.
These steps, and many other alignment options, are implemented automatically when selected in Waxpad. Example.
Comments
Back to Waxpad
Waxpad Article: Vertical Centering