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.
math explained:

		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.

I have been doing some work with sledgehammers of do relatively small tasks. I mean to say using some of the powerhouse applications like Photoshop and Dreamweaver and BB-Edit to do relatively mundane and simple tasks. Since this seems to be a huge waste of time and energy I have been looking for (and accidentally found) some easy methods using the tools built into Mac OS X.

Never underestimate TextEdit. It is an amazing application that will edit almost any from of textual document not only “.rtf” and “.txt”. With the release of Panther (aka. 10.3), Mac added the useful feature to this app of the ability to view and edit “.doc” files. This is a very useful feature for those of us that refuse to convert to the sheep-like heard that is all Microsoft followers. Where did that come from?… anyway. This feature is not the best solution, but it is a good one. In previous versions of OS X you had ot use a unix plugin that would allow your to add this feature, now it’s just part of the base feature set.

Built in screen capture tools! These are just great. here is a list of the main shortcuts that I use, there may be more but there are the ones that i know about.

• command + shift + 3 -> full screen shot
• command + shift + 4 -> cross hairs that you can drag and select a portion of the screen
• command + shift + 4 then press the spacebar -> gives you a camera tool that will capture the selected window when the window is green and you then depress the mouse.

Grab also has additional features that are not in this set. Such as the ability to change the cursor and take timed screenshots. Also to note Grab will take the screenshots in “.tiff” where the default screenshot utility will capture them in “.pdf”.

Preview is awesome at converting the screen shots that I take from “,pdf” and “.tiff” to “.jpg”. This saves me several minutes if I don’t already have Photoshop fired up and ready to go.

And now for the really neat app that inspired this post.

Digital Color Meter is an awesome application that is buried in the /Applications/Utilities/ folder that will show you in RGB percents or RGB HEX values what color you mouse over. This can be an incredibly useful tool in both graphic design and web design.

For those that do not know how RGB HEX values work most web browsers do not understand RGB percentage values but these are very easy to use if you come from any artistic background because this is how the color wheel works. But until the browsers catch up we will have to use RGB HEX values. Now in this application you will need to select from the drop-down menu “RGB As Hex Value, 8-bit”. This will give you a set of RGB values. What you will need to do is take these values in the order they are listed and enter them into your CSS page in the following format.

property_name { setting: RGB;} 

Where “R” is the value of the red channel, “G” is the Green value and “B” is the blue channel.

Hope that this is useful information for anyone that may use it.