Good grief I came across a wealth of information regarding CSS float layouts, ranging from tips and tricks to web applications to detailed explanations of how float layouts actually work. About.com Understanding CSS Float provided some basic information on what a float is and how they work. Although the information is rather simple for a complex CSS user I think it works as a nice refresher to understanding float layouts. One thing about the article I found interesting is it states what a CSS property looks like: .right {float: right;}. Now I haven’t worked with classes that much but a period followed by a name (label) is a class. I’m not saying its incorrect just different. I’ve mainly coded my CSS using ids so I just thought it was a little strange that only the one way of coding CSS for a float was displayed. Just something I noticed.

Snooks.ca (just recently added him to Twitter) article 6 Ways to Understanding Modern CSS-based Layouts provides some very helpful tips. He emphasizes the importance of really learning the box model to help designers/developers get a better understanding of how CSS works. Not only does he have a summary with each tip but links for those interested in seeking out more information on a particular topic on the list. One such topic caught my eye and that was the one that talked about using Ems to size fonts on websites. Mainly Ems bring to mind pre-press and other printing terms but apparently they have some use for websites. One of the links listed below the tip, Elastic Design, seemed interesting enough, so I clicked it. Patrick Griffiths the author of the article Elastic Design discusses the pros and cons of using ems in your coding and how they can affect the design of the page. What I really thought was interesting about it is he goes into how using Ems in your web design helps to create stronger usability for the site by enabling users to proportionaly resize the type to their preference settings without sacrificing design quality. One point he brought up is the difficulty for designers to let go of the idea of rigid design and accept creating elastic design. I think from a graphic designer’s standpoint it can be quite daunting to consider your design as something that can be manipulated by others. I can just hear the gasps of graphic designers dead set on keeping the design original to its initial creation. For the most part we think that way. Most of us don’t really consider that the user should have any control over the look of the site, interactivity with it yes but not the design. Here is a quote from the article regarding the importance of considering elastic design for your site:

Elasticising a layout so that its size will change when a user explicitly opts to change text size may seem unnecessary and even unwanted, but if you have text that can be expanded and contracted, it can make sense for the layout in which it is contained to expand and contract accordingly. Additionally, if a user chooses to display text in a larger size, the amount of spacing around it should expand proportionally, maintaining the designer’s chosen proportions and keeping the text easy to read.

I’m definitely going to try out the Em Sizing approach and see if it helps to create a more fluid design for my CSS layouts. Just a side note but I scrolled down and read the brief bio on the author Patrick Griffths and he has a book called HTML Dog: The Best Practice Guide to XHTML and CSS, published by New Rider books. He also has tips for both beginners and advanced users of HTML and CSS on his accompanying site. Its worth checking out. I’ll have to read the book to provide some feedback on it but as noted on his site it follows web standards which is always a good thing.

I went off on a bit of a tangent with that last one but sometimes you gotta see where the road or um links take you. Just one more thing about Snooks.ca tips he has some more advanced ones that are worth pointing out to any all parties interested. For example, Floated Navigation and Sprites – basically CSS rollovers in a boiled down description. He provides a short list of links under each of them for further explanation. I really need to get on the ball and get the basics down so I can play around with this advanced stuff but I must practice, practice, practice first my basics before I even take a crack at the advanced CSS.

There were a number of different sites providing tutorials on how to create certain types of CSS layouts. I’ve listed a few of them below:

1. Floatutorial provides simple CSS layout tutorials. Mr. Batchelder showed me the Listamatic which happens to be a sub-section of this site. Its a good resource for learning different ways to create navigation with lists.
2. Blog Oh Blog this link is to a tutorial for creating a 3-column layout.
3. CHOPPR -teaches you how to create a multi-column float based layout. Very detailed. He is another person I added to my Twitter. I can always use helpful advice on improving my CSS.

Some other interesting articles and sites regarding CSS layouts:

1. Understanding CSS z-index: Stacking and float
2. Understanding CSS Positioning (this is part 3 of a series)
3. Dynamic Site Solutions
4. Adobe Developer Connection (mainly deals with CSS layouts in Dreamweaver) I have nothing against using Dreamweaver I just prefer not to do my coding in that program.

The last thing I have to say before I end this post is during my search I found information on Microsoft’s program Expression which is more a less their attempt at Dreamweaver. The only reason it came up in my search is cause it talks about using CSS Floats in the program. Here’s the kicker if you want to view the little movie that I’m guessing talks about it you have to download the Silverlight plug-in. Why oh why do they fight so hard to get things done their way? I can’t condemn them for their attempts but I can’t really say anything great about them either. Course to be fair I should download the free trials and see for myself but I don’t think that they will be better than Adobe.