Mammut lorem ipsum dolor sit amet, consec tetur adipiscing elit. Vivamus non mollis ante. Morbi hendrerit iaculis tem? Aenean nec felis arcu, id consequat dolor. Duis sit amet magna justo, nec ultricies tortor. Aliquam ultric cur justo, id scelerisque neque lacinia sed. In nec turpis odio, quis lobortis felis. Nullam eget ante ac dui tempor ornare at ut lacus. Lorem ipsum dolor sit amet, consec etur adipiscing elit. Pellen tesque habitant morbi tristique senectus et netus et male suada fames ac turpis egestas. Ut eget elit porta tellus vestibulum mattis. Etiam semper egestas laoreet. elis elementum venenatis.

Jeff-kun lorem ipsum dolor sit amet, consec tetur adipiscing elit. Vivamus non mollis ante. Morbi hendrerit iaculis tem? Aenean nec felis arcu, id consequat dolor. Duis sit amet magna justo, nec ultricies tortor. Aliquam ultric cur justo, id scelerisque neque lacinia sed. In nec turpis odio, quis lobortis felis. Nullam eget ante ac dui tempor ornare at ut lacus. Lorem ipsum dolor sit amet, consec etur adipiscing elit. Pellen tesque habitant morbi tristique senectus et netus et male suada fames ac turpis egestas. Ut eget elit porta tellus vestibulum mattis. Etiam semper egestas laoreet. elis elementum venenatis.

Home • Los Alamos • Apple • Microsoft • Google

This page uses percentage widths for a fluid layout. The body has a background image (1x4 pixels, tiled) that provides some stripey visual interest to the body. The div#outer division has a width of 100% of the browser window and overlays the red, white, and green stripe pattern of the Hungarian flag over the body background. The div#wrapper division has a width of 90% of the browser window to let some background show through on both sides, and has side margins set to auto so it is centered. It also has min-width and max-width values set to keep that content part of the page from getting too narrow or too wide (try making the browser window very narrow and very wide). The three sections inside div#wrapper (they are section#leftbox, section#centerbox, and section#rightbox) use percentages to specify their widths and their side margins and padding so that they adjust with screen width. The side sections are floated left and right, and the center section has wide margins to provide space for them. The side sections have width 16% and padding of 1% on both sides (those percentages are relative to the div#wrapper in this case, since it is their container). The center section has left and right margins of 18% and left and right padding of 1%, with no width specified. These percentages are also relative to the width of the parent div#wrapper.

The wrapper div has the background color you see behind this text, and has the Hungarian flag strip background image. The left and right sections also have stripe background images, and they have a darker background color. The main section has the Mammut and Jeff image as a background, and no background color (so that the background color and and background image of the wrapper can show through). All of the stripes in these divisions line up (because I made sure that the body and divisions and sections all have zero top margins).

The text link menu has a rollover effect. The Home item in the text menu is also a link (which would normally be a link to this page, if it were named index.html), but it has the class style .current applied to it that makes it look different than th other links to indicate that this is the current page. It also has no rollover effect, and it even keeps the mouse pointer from changing shape so that it does not appear to be a link even when you point at it.

To get consistent behavior between Internet Explorer and other browsers, I use a style to make sure that the first item in a div has no top margin, since IE differs from other browsers about whether these items should have a top margin by default. The style is *:first-child { margin-top: 0; } and it would work for any first-child element (since the * is a wildcard for any element).