Adaptive Layout

This example demonstrates how to use dynamic styles to create a page that adapts to the user's environment. The menu bar uses the system settings for colors. For systems with poor color support, the document uses only black and white rather than colorful headers. The layout will change depending upon the size of the window. The contents are also slightly modified when the environment changes.

Floating Elements

Adaptive Layout and
Dynamic HTML!

Resize the window
for an example.

The figure to the left above demonstrates that elements can move into and out of the flow based on the window size.

The rendering of the page changes based on the window size and the number of colors supported. The text and the floating element are repositioned to optimize the amount of real estate available on the screen.

Conditional Data

Different data can be displayed in response to the environment.

You are viewing a wider version of this document.

The document has a different style because your window is narrow.