This page is the same as Centerpage1 except that all widths and sizes based on pixel units have been replace by em units. This way, if a user changes the default font size of theor browsers, the widths and sizes will all expand or contract at the same rate so that the relative positioning of the text and the divisions does not change. Layouts that use em units this way are called "elastic layouts," because they stretch with changes of font size. Note, however, that this will not affect the sizes of images on the page because those are sized in pixels.
NOTE! You can change the default font size in your browser to see that this page layout does not change with changing font size. Or, if you are using Firefox, you can slect the alternate CSS style sheets that I have for this page, which are named 1.25em and 1.5em.
The Sidebar: Notice the interesting sidebar on the right side of the page here. The content of the sidebar is text that is located in its own section of this document (this is done using the HTML5 <section> tag). I created an ID style named #rightsidebar that formats the width and border of the sidebar and makes it float to the right (causing this text to flow around it. The sidebar section is actually located in the HTML just above this current paragraph. Floating it off to the right (within the #centerpage wrapper) then allows the following content (this paragraph) to continue down the page and flow around the sidebar as needed.
The title and paragraph in the sidebar were formatted using descendent selectors. The title is formatted as h2 and the paragraph is just formatted as a normal paragraph, but I created two selectors ( #rightsidebar h2 and #rightsidebar p ) that apply the formatting shown. These selector names find any h2 or p content inside something formatted as #rightsidebar, and apply the formatting specified by the styles. Cool. Notice that the h2 here looks nothing like a normal h2 (the descendent selector overrides that other h2 formatting and applies the one made specially for use in the sidebar).
The "rollover buttons" in the sidebar are actually just text links that have been formatted with CSS styles to do the cool rollover trick (try them out in the browser!). I created the special class and pseudo selector styles ( a.side, a.side:link, a.side:visited, and a.side:hover ) to make this effect. The text in the sidebar is made into links, and then the .side class is applied to the links. Voilà! I was particularly pleased with the result (although you may not like the choice of colors). Making the a.side style use display:block allows the links to respond even if you point at the blank areas within the links (not just at the text itself). The a.side style has thin borders on the top and left edges, and medium thickness borders on the bottom and right (which apply to the link and visited states). The a.side:hover style has the thin and medium borders reversed—this is what causes the visual effect of the "button" seeming to press inwards as you rollover the link.