logo Headline

Rightbox sidebar:

Here is a right sidebar section that has been floated to the right. The mainbox section leaves a wide right margin to make room for this sidebar so that the text does not overlap. The two boxes actually DO overlap, but this sidebar is in the wide right margin of the mainbox section.

This version is the same as Float 1c except that I have added a <footer> section (style name: #footer) after the main content section. The footer has no width specified, so it will be the full width of the page. Because the footer follows the main content division in the HTML code of the page, it will naturally appear after the main content section (there is a 10px margin on the top of the footer to provide spacing from the main caontent division). BUT, if one of the floated sideboxes is taller than the main content area, the footer would end up overlapping it. To prevent this, the #footer style has clear:both set so that it will always be below the bottoms of the sideboxes. I had to add 10px of margin to the bottoms of the sideboxes to make sure that there would be space between them and the footer (since the top margin of the footer does not guarantee this when clearing a float). Change the width of you browser window and observe how this page reacts.

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. This is the content for the main content area of the page. Pardon me while I repeat myself over and over and over again.