a CSS float test page

This page is to test the float property in CSS, using a simple stylesheet included in the page.

main text goes here. If the style sheet works, the main text will take up the right-hand three quarters of the page,, leaving a column free on the left for the navigation text (just like having an image that sits on the right hand side of text).

The styles used: 

.main { float: right ; width: 75%}
.nav { background-color: gold; width: 8em; }

The main content (this bit) has class main, the sidebar content (next section in a linear version) has class nav, and the footer, from the horizontal rule onwards has class afterwords

and this stuff is the left hand column. If stylesheets don't work, it will appear after the main content

there is a bug in some browsers so that the background colour for this section goes all the way across the page.

I don't think that should happen.

But the real test is whether the text groups properly.

Note how this footer acquires the full width of the canvas. Without having to resort to the clear property.

However, if the window width is small enough so that the width of the .nav bar that has been specified in 'Em' units is more than the 25% of full width left after the percentage width of the floated .main division, the page starts to degrade. In IE 5.5 the navbar flows in after the main section, perhaps not a bad solution for those using a large font on account of low vision. In Netscape the color bleeds again. This can be somewhat fixed by asserting a background color in the .main block.

    Revision history:
  1. Original test page by Charles McCathieNevile $Date: 2002/02/15 17:16:00 $
  2. Styling amendment by Emmanuelle Gutiérrez y Restrepo Date: Sat, 16 Feb 2002 13:42:45 +0100
  3. Edited test page by Al Gilman Date: Sat, 16 Feb 2002 13:27 -0500