There has been some talk about the appropriate use of floating elements through CSS on several sites online. I have been working on several sites recently in which I have successfully integrated them (floats) cleanly and on the way discovered several bug in the model. I have documented some of the display issues here as well as provided several pages with demonstration code.
For starters I observed that floated elements can appear on either side within a div regardless of it’s position within the code (with limitations: see below). This has long been a source of irritation for me when laying out designs with absolute or relative positioning.
The reason for this is a less than obvious, let me explain. If a section of the content that is not relative to the page’s purpose. Say for example a sidebar full of links. Needs to be on the left side of the page, then that would have to come first in the markup or it would not align correctly when the page was displayed. This was a very odd quirk in CSS. To explain this a little deeper.. It is important to get the content as close to the top of the page as possible because while search engines do scan the entire page they do seem to hold the top of the page with a little more importance than the rest of the page. This is one of the holistically important issues to consider when designing a web site. Additionally, when viewing (listening) to a page with a screen reader the viewer would need to get past all of the links before they can get to the meat of the page.
Here are several pages that I used to test the CSS floats. I used 3 columns because of the complexity of it, and the ability that testing the effect that the 3rd column would have on the floats. The basic theory of this can be applied to 2 column layouts with floats by making a few assumptions based on the outcomes of the given examples.
- all floated left
- all floated right
- float left, float left, float right
- float left, float right, float left
- float right, float left, float left
The limitation seems to be the “float_right-left-left” page. For some reason the CSS engines don’t seem to like this. It works fine for 2 column layouts (based on experience) but not for the 3 columns that I tested here. This is seemingly understandable and can be worked around by using an absolute attribute as shown in this example. This is not the best solution for this problem because everyone’s favorite browser does a mockery of this fix. Providing alternative fixes to this display issue would extend the scope of this article indefinitely.
One additional caveat that I did find was some hidden math. I documented this in the CSS, but I want to add a little explanation here also.
700 -232 -232 = 236
Also the “sub_col_2” cannot be >230px without causing display errors. this is because of the 2px for the container element.
The moral of this story is that floats can be used to a certain extent for positioning without any major display errors. However, there are other problems that are caused by using every method available to us. As I always maintain my continuing recommendation is use the best tool for the job. The beauty of separating CSS from XHTML structural markup is that it is amazingly easy to change the display consistently across all pages without touching the structural markup.