Text-size in Box 11 can be changed. Hit either the make big or make small button.
Text in Box 11 is at normal 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, 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. This would be 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 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. It also demonstrates how text can be resized, by the web site visitor, via controls on the page, as opposed to being resized via browser controls. On this particular page I've made only one box with in-page resizable text, but with in-page resizable text, any number of boxes, or all of them, can have their text made resizable, one box at a time, more than one at at time, or all of them with one click. With browser controls, there is less control of which text is changed in size.
So — everything in its place. Divide the page into boxes. Here we have the last box on the right set to float:right. Have the others 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 makes the left side of the page element relative to the 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 — seems to double the amount of pixels you specify. Annoying.
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, 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 — see the checkbox at the top of the page.
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, 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 — see the checkbox at the top of the page.
OK, I added some more text on the bottom. I also added a bottom margin of 60 pixels.