The text-size in Box 11 (as well as the explanation text) can be changed. Just hit either either of the make big or make small buttons. In addition to changing the text size, hitting either of the second pair of buttons will cause the page to scroll to a few lines above Box 11.
Text in Box 11 is shown at small size.
To see this page, and size changes to this page, as the author of this page intended — if you are using MS Internet Explorer you may want to go to View > Text Size > Medium; then go to Tools > Internet Options, hit the Accessibility button, and in the dialog box that comes up, clear all the checkboxes; then press OK. Most likely you will not need to change anything, as these are the default settings.
This page demonstrates how text (and images) can be precisely positioned, laid out, in "boxes" on a page, using html and css — and then how the precisely positioned text can be increased in size without changing the size or position of the boxes, or the layout of the page, and without any text overlapping other text. When the text-size within a box is increased to the point where all the text no longer fits within a particular box, scroll-bars automatically get added to that box. This page also demonstrates how text can be resized, by the web site visitor, via buttons placed on the page, as opposed to being resized via the browser menu. I call this in-page resizable text. On this particular page I've put text in two text boxes, box 11, and box 21, but only one of the 2 boxes has in-page resizable text. Text in box 11 can be made big, or made small, but text in box 12 remains big at all times. In addition, on this particular page, the size-buttons are configured to also control the size of the text you are now reading. On this particular page, there are 2 sets of make-big and make-small buttons, and both make-big buttons do the same thing, as do both make-small buttons, except that I've also configured a "landing zone" for the second set of buttons, that is, when you click on one of the second set of buttons, the page automatically scrolls down to a few lines of text above box 11. But any customized control is possible. With in-page resizable text, it is possible to make any button control any text, and make the text resizable for any box, any number of boxes, or all of them. Pages can be configured so that one box at a time can can be resized, or so that more than one box at a time can be resized, or so that all the boxes can be resized with one click. With browser menu controls, there is less control of which text is changed in size.
So — everything in its place. We divide the page into boxes. Here we have the last box on the right set to float:right. We have the others set to float:left. With relative positioning, I think usually you should use margin-left, margin-right, etcetera, instead of left, right, etcetera. You can use both left and margin-left, and left will either be ignored or added to margin-left. With position:absolute, margin-left sets the left side of any page element relative to the page; left sets the left side of any page element relative to any box it is nested in. If you have described a page element with both left and margin-left, the one that is placed last, is used. When I first wrote this article, MSIE added extra margin space on the left, of the leftmost box nested inside a bigger box — it seemed to double the amount of pixels you specified. Annoying. Other browsers did not have this glitch. Later, MS apparently fixed it.
Set 1 (top).
Firefox and Opera have better systems than MS Explorer, for increasing text-size. I've made it easy to increase text-size, no matter what browser you are using. Box 11 and 21 have the same text, and both boxes are 230 pixels wide by 260 pixels high. In Box 11, each character is normally about 14 pixels high; in Box 21, each character is 32 pixels. In 14 px size, the text should take up nearly the entire box. You can increase the size of the text in Box 11 to 32 pixels — by pressing a make big button.
Set 2 (bottom).
Firefox and Opera have better systems than MS Explorer, for increasing text-size. I've made it easy to increase text-size, no matter what browser you are using. Box 11 and 21 have the same text, and both boxes are 230 pixels wide by 260 pixels high. In Box 11, each character is normally about 14 pixels high; in Box 21, each character is 32 pixels. In 14 px size, the text should take up nearly the entire box. You can increase the size of the text in Box 11 to 32 pixels — by pressing a make big button.
OK, I added some more text on the bottom. I also added a bottom margin of 60 pixels.