Adding Ajax

Chapter 5. Space: The Final Frontier

Managing space on a modern web page works with four factors: the space reserved for each element, the elements' positions within the page's horizontal and vertical flow, their positions within the page layers, and whether the individual elements are currently displayed.

Before the advent of CSS and JavaScript, space in a web page was a static thing. You could use a flexible container such as an HTML table that adapted to the browser window size, but that was about it. If you had a web form with a lot of fields, you either put them all into one long page or you split the form up over many pages and updated the data in pieces. If the application user made an error, he wouldn't know until after the form was submitted to the server. Most likely he'd then be redirected to a page just to print out the error message.

Today, through a subset of the Ajax technologies, elements can be positioned and layered through the use of absolute positioning. Each element has its own internal characteristics such as width, height, padding, and margin, all of which can be adjusted. Elements also have a clipping region, which determines how much of the element is displayed and how much is "clipped" (not shown and also not influencing the flow around it).

If an element's display is set to block rather than inline, the setting incorporates line breaks before and after the element, forcing elements that follow to be pushed down the page. An element can also be removed completely ...