Headline

In this version of the Float 1 example I have applied formatting to the three sections of the page with ID styles. The header (style name: #topbox) is 100% wide and 180 pixels tall, and has a gray background color so you can see it easily. The nav box with the navigation links (style name: #leftbox) has a width of 140 pixels and is floated to the left (it also has a top margin of 10px to move it down from the header topbox, and left padding of 10px so that the text does not butt up against the edge of the box; it is also colored to show you were it is). The section that contains this explanation (style name: #mainbox) has no float, and uses a left margin setting of 160px so that its content area does not overlap the nav leftbox (it also has 10px top margin and 10 px padding on all sides, and a background color). Why 160 pixels? Because the content area of nav leftbox has a width of 140px, and left padding of 10px (for a total of 150px), and so this gives me 10px of white space between leftbox and mainbox.

The #mainbox p style is a descendent selector that applies a style to all paragraphs within the mainbox division. This style sets the top margin of the paragraphs to 0 pixels and the bottom margin to 15 pixels. This is done because some browsers assume that the first paragraph in a division should get the normal margin space at its top, while other browsers assume that space should NOT automatically be added to the top of the first paragraph in a division. To prevent this content from looking different in the different browsers, this #mainbox p style specifically sets the top margin of all paragraphs in this division to zero pixels (and uses the bottom margin value to put space between paragraphs). This is the kind of correction that you would not need to fiddle with yourself if you started with a normalize.css file that had such settings in it.

The h1 element at the top that contains the image and the headline text has white-space:nowrap set so that the line will not wrap if the browser window is made too narrow. Pardon me while I repeat myself over and over and over again to fill space. This is the content for the main content area of the page. Pardon me while I repeat myself over and over and over again. This is the content for the main content area of the page. Pardon me while I repeat myself over and over and over again. This is the content for the main content area of the page. Pardon me while I repeat myself over and over and over again. This is the content for the main content area of the page. Pardon me while I repeat myself over and over and over again.