Tutorial 21: CSS Floats, Part II
|
| ||||
| ||||
|
|
Floats in practice
Seeing this problem with floats and columns, the only use of floats today is to create floats with the default appearance: a block of text up against the side of the viewport with text flowing around. Although not as neat as multiple columns, this effect is useful and not something you can do with HTML alone. So, we can change the style sheet we used above to the following:
/* Looks */ BODY { background-color: #FFFFFF; color: #000000; } A:link { color: #8B7CFF; } A:visited { color: #483ACE; } A:active { color: #CC0000; } H1 { font: bold italic large Arial, Helvetica, sans-serif; } H2 { font: italic large Arial, Helvetica, sans-serif; } #intro { border: medium solid #ACA250; } #header P { border: medium solid #ACA250; text-align: center; } #footer P { font-size: smaller; text-align: right; } /* Layout */ #intro { float: right; width: 35%; } #footer { clear: right; }
This puts our little intro on the upper right hand corner of the page. The good thing about this simple technique is that it works with all CSS-supporting browsers, with one little niggle. Take a look at a screenshot of this page on Internet Explorer 4.0:
A right float in Internet Explorer 4.0. [Full-sized image]
As you can see, IE4 right-aligns the text in the float. This is a bug in IE4, but is easy to work around: Just add an explicit text-align property for the float in your style sheet, which will now look like this:
/* Looks */ BODY { background-color: #FFFFFF; color: #000000; } A:link { color: #8B7CFF; } A:visited { color: #483ACE; } A:active { color: #CC0000; } H1 { font: bold italic large Arial, Helvetica, sans-serif; } H2 { font: italic large Arial, Helvetica, sans-serif; } #intro { border: medium solid #ACA250; text-align: left; } #header P { border: medium solid #ACA250; text-align: center; } #footer P { font-size: smaller; text-align: right; } /* Layout */ #intro { float: right; width: 35%; } #footer { clear: right; }
This should give you a nice float that works with all browsers, has no problems with viewport resizing, and falls back gracefully to a default layout on non-CSS browsers.
