Text-size in Box 11 can be changed. Hit either the make big or the make small button.
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 changing 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 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 controls on the page, as opposed to being resized via the browser controls. I call this in-page resizable text. On this particular page I've configured only one text box to have in-page resizable text but, with in-page resizable text, it is also possible to make the text resizable for any number of boxes, or for 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 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. MSIE adds extra margin space on the left, of the leftmost box nested inside a bigger box — it seems to double the amount of pixels you specify. Annoying. Other browsers do not do this.
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.