Websites designed for children have been largely overlooked in web design articles and design roundups, but there are many beautiful and interesting design elements and layouts presented on children’s websites that are worthy of discussion and analysis. There are also a number of best practices that are exclusive to web design for children’s sites — practices that should usually not be attempted on a typical website.

This article will showcase a number of popular commercial websites targeted towards children, with an analysis of trends, elements, and techniques used to help keep children interested and stimulated.

Design That Stimulates the Senses

Humans are mentally stimulated by a number of factors, and this is especially true with children. Successful children’s websites implement a number of elements and design principles that create an environment suited for a child’s personality and interests.

Bright, Vivid Colors

Bright colors will easily capture and hold a child’s attention for long periods of time. Although color choice is a primary factor in designing any type of website, this is especially true when designing a website for children since colors make a big impression on children’s young minds. Color choices and combinations that would likely be rejected or laughed at when designing a typical website may be welcomed on a website for children.

How many of the color combinations used in the screenshots below would succeed on a website aimed at an adult audience? Not many. So, when designing a site aimed at kids, use bright, vivid colors that will visually stimulate in an unforgettable way.

PBS KIDS

Herman’s Homepage

Funbrain Playground

A Happy Mood

Kids will remember and return to a website if their experience is a happy one. Elements can be incorporated into the design to ensure that a cheerful, positive mood is presented.

Mickey Mouse Clubhouse creates a happy mood by making Mickey himself a visual focal point on the page. His happy face and body language help enhance this happy feeling, creating a welcome atmosphere.

The Play-Doh website creates a happy mood using a beaming child as the focal point.

The Fifi and the Flowertots website has a large smiling Flowertot character in visual focus, creating a happy mood.

Elements From Nature

Children are stimulated by recognizable elements that they can relate to. Because children’s experiences in life are limited, some of the things they are most familiar with are found in nature. Natural elements such as trees, water, snow, and animals are used in the websites shown below. In many cases, these elements are overemphasized through size or simplicity of design.

The Disney website alters its theme depending on what product is being promoted. In this screenshot, they use a Grand Canyon-like landscape to create a memorable visual experience.

Discovery Kids uses an underwater theme.

Club Penguin presents an arctic theme.

CBC Kids uses a seasonal theme based on simplistic, eye-catching graphics.

PopCap Games uses a grassy landscape in front of large rays of sun.

Larger-Than-Life Design

Large design elements have proved to be effective in all types of web design, demonstrated by the fact that large typography, large buttons, and large call-to-action areas have become commonplace in modern design. Because children are naturally drawn to simple, obvious, and recognizable objects, websites designed for children will increase their effectiveness through the use of large design elements.

Animated Characters

Large, animated, speaking characters are a fascinating and captivating way to grab and hold a child’s attention. Many sites designed for children use this element effectively.

Barbie

Mr. Rogers’ Neighborhood

Disney Princess

Thomas the Tank Engine

Barney & Friends

Depth in Design

Children like to let their imaginations run wild in a world that looks and feels real. This kind of atmosphere can be created through depth in design elements. This might include extruded shapes, shadows, landscapes, beveled effects, shiny gradients, or floating objects. Often, many of these elements are present in cartoon-like displays, as shown below.

The Webkinz® “Adoption Center” uses shadows, a life-like character, and other 3-dimensional elements to create a design that has depth.

Poisson Rouge creates a deep, realistic atmosphere using a window that looks outside at the sun, along with a number of other 3-dimensional elements.

Rainbow Magic creates depth in their design through a Flash-animated landscape scene that moves as the user hovers over different elements.

Navigation and Call-to-Action Areas That Stand Out

In any website design, navigation and call-to-action areas should be focal points. Children’s website designers can oversimplify these areas so that children can navigate easily. Text-based navigation on children’s websites would not be as effective as large buttons and graphics, because they would lack visual focus on a page.

Peppa Pig has a horizontal navigation bar that includes large icons and easy-to-read descriptions for each item.

The Winnie The Pooh website incorporates their navigation bar into their “forest” theme, using large wooden graphical elements that won’t be overlooked by the user.

Sesame Street has an easy-to-locate horizontal navigation bar, along with large call-to-action areas.

My Little Pony uses text-based navigation, creating a less-graphical experience, which allows focus on the content elements. This might be ideal in some situations, but on a children’s website a graphic-based navigation bar is more likely to be effective.

User Interaction

Probably one of the most important ways for a children’s website to succeed is to include elements that allow a child to interact with the site in some way. Children don’t want to do intense reading or research; they want to play and be entertained.

On a typical website, certain design elements are viewed as distracting, unusable, and cumbersome. On a child’s website, those same elements are viewed as an effective means of attracting users.

Interaction Through Animation and Sound

Effects and experiences created with Adobe Flash are discouraged in typical modern web design, but on children’s sites there is almost no other option. It’s true that JavaScript animation and effects have come a long way because of the many JavaScript libraries available, but the ease with which complex animations can be created with Flash makes this method the first choice for many commercial websites designed for kids.

The Pauly’s Playhouse site, like most of the websites featured in this article, is built entirely in Flash.

The Hot Wheels website includes an animated “car of the day” that zooms onto the screen when the page loads, creating visual interaction.

Roary the Racing Car has a brief “flash intro” with a “skip” button. This is an old-school trend in typical web design, but is an effective means of catering to a child-based audience. The intro animates through a road until the characters appear on the horizon. This helps the user feel as though they’re personally entering Roary’s animated world.

The Yahoo! Kids navigation bar is created with Flash and makes sound effects and animates when its items are hovered over. This trend is very common on many of the sites featured in this article.

Interaction Through Video

Television is known to captivate child audiences for hours, which is why “Saturday morning cartoons” have for decades been a lucrative part of the broadcast schedules for many TV Networks. Similarly, video on a child’s website adds a fun, interactive, and educational aspect to a site’s content.

Kids’ CBC – Video

Yahoo! Kids Movie Guides

National Geographic Kids – Videos

Interaction Through Games

What child does not enjoy playing games? One of the most effective ways to entertain, educate or otherwise occupy a child on a website is to include a “games” section. Almost all the websites researched for this article include games that educate, stimulate, and allow direct interaction, while also incorporating many of the design elements already discussed. Below are some examples.

CBeebies – Gordon the Garden Gnome

Toy Story – Woody’s Big Escape

Disney Pixar’s World of Cars allows users to create, share, and race their own custom cars.

Printable Elements

Kids like to have something tangible to take with them, to help them remember their experience. Printable pictures and colouring pages allow kids to have a keepsake of their experience, while giving website owners an opportunity to enhance and promote their brand outside of the computer screen. Below are some examples of printable colouring pages on kids’ websites.

Pingu Coloring Pages

Crayola Digi-Color

Peppa Pig Colouring Pages

Thomas and Friends Online Colouring

Teletubbies – Print To Color

Unconventional Methods

We’ve already discussed a number of elements that, in modern typical web design, are now considered unconventional. Sound, animation, and large obtrusive graphics are often frowned upon in typical web design. On children’s websites, these elements help the user experience. Other unconventional elements and design choices are discussed below.

Changing the Cursor

This is absolutely viewed as a bad practice in standard web design, but can be a fun, effective way of adding a playful element to a kids’ website theme. This can be done using dynamic HTML, but is more often done via Flash.

The cursor on the Discovery Kids website turns into a snapping bear trap graphic.

The cursor on the Sesame Street website is followed by a yellow star when it hovers over standard HTML elements, and turns into a yellow star surrounded by smaller animated stars when the cursor is moved over clickable Flash elements.

Talking Navigation

Sometimes a navigation bar will produce sound effects, but in other cases, the navigation links will sound out what they represent in a cheerful voice.

The PBS KIDS navigation bar speaks using children’s voices, when the user hovers over it.

The CBeebies navigation bar uses a voice to sound out the destination of each navigation item.

The Bob the Builder navigation bar speaks to the user on mouseover.

The Fifi and the Flowertots features a speaking navigation bar.

Breaking the Grid

While traditional modern web design techniques have embraced the benefits and aesthetics of grid-based design, kids’ websites can break free from an overly structured layout to create a unique world that a child will enjoy experiencing.

This is not to suggest that using a grid as the basis of the design is wrong. It may be beneficial to start with a grid, then design elements outside the grid in a controlled manner. This flexibility in design and layout is demonstrated on a number of the sites already discussed, but is also evident in the navigation bars of the examples below.

The navigation bar on the Spongebob Squarepants website is slanted, going against convention in typical grid-based web design.

The Hannah Montana website features navigation bar graphics that break the grid.

The In the Night Garden website features a very unusual navigation bar design that bears little resemblance to that found in a conventionally-structured design.

Below are some examples of websites that utilize a more rigid, grid-based format, and as a result are not as unique, memorable, or captivating as some of those already considered in this article.

Kids WB is rigid, and not as memorable.

The Crayola website is somewhat old-school with its grid format and vertical navigation.

Neopets is also designed on a more structured grid.

Granted, in some cases a stronger grid-based design would be necessary if the audience was an older child audience, as is the case with SI Kids, shown below.

Taking Responsibility

If you are attempting to reach the minds and hearts of young, impressionable people through an online experience, you are entrusted with a weighty responsibility. Children are mentally fragile, and easily affected by what they see, hear, and touch. There are certain factors that need to be addressed on every children’s website, to ensure no harm is being brought to the children.

Promoting Education

Games and other interactive elements should be created not just to promote your company’s brand and identity, but to help educate and train young minds in a beneficial and positive way. Promoting education through games and activities will show that your company cares about the user and how their online experience might affect them in the future.

Online Learning Games from Fisher Price include games that vary according to age group.

Funbrain promotes itself as “The Internet’s #1 Education Site for K-8 Kids and Teachers.”

Information for Parents

Parents will be keeping a close eye on their children’s internet habits. Many children’s sites are aware of this, so they include information that is geared towards parents. Sometimes this is in the form of a tip, as is the case with the Sesame Street games website, or simply a navigation item that points to a parent’s section.

Sesame Street Games includes a “Parent Tip” box.

BEN 10 has a “Parent Stuff” link in their primary navigation bar.

Thomas the Tank Engine includes a “parents” link.

Usability Testing

Finally, one of the best ways to help build a successful online experience for children is through watching children navigate and interact with your site’s games and other unique features. Not all companies will have the budget for extensive testing, but almost all will have the ability to do at least a minimal amount of testing — even if it’s with just one child. This will allow you to see the site through a child’s eyes and make any necessary modifications, the same as would be done in any usability tests.

Companies like Disney, Sesame Street, and PBS, of course, have been studying the behaviour of children for years, so many of the examples showcased above could be utilized to form the basis for a successful children’s website, even if no usability testing is done.

Conclusion

Here is a summary of both conventional and unconventional best practices for designing a website for kids.

Conventional Best Practices

• Create elements that are large and visually memorable
• Use bright, vivid colors that stimulate the senses
• Incorporate elements from nature
• Create depth in the design
• Add navigational elements that are large and easy to find
• Use video
• Include printable elements
• Break the grid
• Make modifications based on usability testing

Unconventional Best Practices

• Create a happy, playful mood
• Use animated characters
• Use graphic-heavy navigation bars
• Use Flash animation abundantly
• Embed motions and sounds that trigger on page load
• Include a “games” section
• Change the cursor to contribute to the theme
• Add voices to navigation rollovers
• Be accountable to both children and parents

A web designer who has worked on a children’s website would likely say that it was one of the most fun and interesting projects they’ve had the privilege of working on. If you ever have the opportunity to create a user experience that is geared towards children, be sure to follow some of the proven methods demonstrated on many of the sites discussed here, and your website will have a good chance to be big hit with children.

The most recent collection of creative blog designs was featured here on Smashing Magazine back in July. Only three months have passed and we’ve got a new dose of inspiration for you. Beautiful and sophisticated designs are constantly appearing on the Web; creative activity is in non-stop mode, despite global economic shocks and unfortunate events; and this is surely a positive sign.

Today, we showcase 50 fresh, beautiful, inventive and, hopefully, inspiring blog designs. The variety of styles represented in this collection is considerable, so everyone will be able to find a tasty piece of inspiration for their own creative aspirations. Notice that every screenshot is clickable and leads to the website itself.

Beautiful and Creative Blog Designs

Jason Gray Music
Jason Gray’s blog was initially WordPress-based, but it now has a beautiful and original Flash appearance that we just couldn’t pass up.

The Pixel Blog
This exquisite blog belongs to a Web design and marketing company called The Pixel. Amazing graphics in the header and footer, along with a giant tree (the branches of which separate the posts), make this design pure eye-candy.

Sushi & Robots
Sushi & Robots is the journal and portfolio of Jina Bolton, a San Francisco-based designer, developer and author. If you’re looking for creative inspiration, this website is definitely a master class.

WorkAwesome
The neat desktop-themed design of WorkAwesome’s blog is definitely worth your attention.

One by Four

Jason Santa Maria

Dustin Curtis

Jack Cheng

New to York

31three

Abduzeedo
Abduzeedo, which is bookmarked by every Web design fan, was recently redesigned. The highlights are considerably enhanced usability and unique post teasers.

iA

Darren Hoyt

Point & Anchor
It’s all about the lines here. Point & Anchor’s blog design is quite engaging.

Trent Walton
Neatly combining a few uncomplicated code hooks, the founder of Paravel Web design agency, Trent Walton, has created an original, attractive blog. The presentation of each individual post and the overall layout of the blog are remarkable indeed.

Tumble

Fudge
The website of digital studio Fudge is currently under construction. Still, the way it has designed its latest news log is worth mentioning here. Photoshop interface imitating design is a neat idea. Plus, the navigation is a treat for the eye.

UX Booth

daus.trala.la

Design Intellection
This simple yet admirable blog design is achieved using HTML 5 markup. The dotted typography for post numbers is a nice touch.

Biggest Apple
The pure style of Biggest Apple’s website features a gorgeous sketch in the header and some pretty icons all around.

árbol textual

Helium Workx

Argee

Stripturnhout.be

Mark Boulton

This is a working library

LaMalla.cl (Chile)
This amazing blog belongs to a small community of creative people, a space to share links to inspirational info from all over the globe. A grayscale geometrical background and cool jQuery effects make our exploration of this website a really enjoyable experience.

Contrast
A clean style, nifty typography and hover effects make for a great blog design. Excellent work by Contrast, a Web apps development crew from Ireland.

Demain J’arrête (France)
This classy comic strip is available in French only, but the blog’s design won’t leave you cold.

Fran Fernández
The blog of Spanish singer Fran Fernández features an expressive and slightly careless-looking graphic design, which reflects the passion of the musician best.

Stéréosuper (France)
Stéréosuper is a successful duo of creative folks working in the field of multimedia. Boris and Jean-Francois are keen on karate: perhaps this explains the imaginative fighting characters in their design. The dark color scheme and hatched elements are quite appealing, too.

Music City Unsigned
This cute blog belongs to the Nashville community of emerging artists. Although it is Flash-based, you won’t have any problems with accessibility or navigation here.

Tal & Acacia
Unpretentious beauty: this is how we would describe this design. Pastel-themed graphics give it a special flavor.

Denis Chandler’s Blog (Another Blog About Stuff)
The style of this blog is fairly conventional, but look at the header! This bit of spice elevates the otherwise formal design, bringing in some splash.

Mulletized
This blog of Cape Town Web designer Brendon Grobler features an offbeat layout and great use of typography. This is what Brendon says about his blog redesign: “I tried to create something less “bloggy” and more graphic, focusing strongly on typography (which is one of my great design loves) and imagery.” The result is impressive, wouldn’t you agree?

M1K3
This blog (belonging to UI designer and developer Michael Dick) is an example of an excellent dark design.

Mark Forrester
This awesome blog-styled website is a creative outlet for Mark Forrester, a “half-baked” (his words) English/South African freelance designer and entrepreneur. The journal is easy and pleasant to navigate, and the cartoon illustrations in the header and footer are incredible. (They were designed by Cape Town-based illustrator and cartoonist Alex Latimer).

Jord & Chan
This nice duo-themed layout presents two strips of content on the same page, a very original idea. The smooth background texture adds more charm to the design.

Cog’Nition
This blog has a lovely surprise: you can change the design’s theme, choosing from two amusing cartoon-style backgrounds.

JonahL
Jonah Levine’s blog follows simplicity and a pure style. An attractive dark design, and a good use of lines.

Marcel Müller blog
Marcel Müller’s blog has a stylish, corporate look. Another good example of precise, minimalist design.

TrippingWords
This really is something striking. Everything here, from the header to the footer, is extraordinary and hyper-creative.

The Swish Life Magazine

mesonprojekt

DesignCritique

Manuel Romero

Related Articles

• Corporate Blog Design: Trends And Examples
• 50 New Beautiful Blog Designs
• Showcase Of Elegant And Original Blog Designs

(al)

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable.

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development.

Definition and Syntax

The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the document flow. This allows naturally-flowing content to wrap around the floated element. This concept is similar to what you see every day in print literature, where photos and other graphic elements are aligned to one side while other content (usually text) flows naturally around the left- or right-aligned element.

Flickr photo by presentday

The photo above shows the “Readers’ sites” section of .net magazine, which displays 3 readers’ photos each aligned left in their respective columns with text wrapping around the aligned images. That is the basic idea behind the float property in CSS layouts, and demonstrates one of the ways it has been used in table-less design.

The effectiveness of using floats in multi-columned layouts was explained by Douglas Bowman in 2004 in his classic presentation No More Tables:

No More Tables

Bowman explained the principles behind table-less design, using Microsoft’s old site as a case study. Floats were used prominently in his mock overhaul of the Microsoft layout.

Syntax

The float CSS property can accept one of 4 values: left, right, none, and inherit. It is declared as shown in the code below.

#sidebar {
	float: left;
}

The most commonly-used values are left and right. A value of none is the default, or initial float value for any element in an HTML page. The value inherit, which can be applied to nearly any CSS property, does not work in Internet Explorer versions up to and including 7.

The float property does not require the application of any other property on a CSS element for float to function correctly, however, float will work more effectively under specific circumstances.

Generally, a floated element should have an explicitly set width (unless it is a replaced element, like an image). This ensures that the float behaves as expected and helps to avoid issues in certain browsers.

#sidebar {
	float: left;
	width: 350px;
}

Specifics on Floated Elements

Following is a list of exact behaviours of floated elements according to CSS2 Specifications:

• A left-floated box will shift to the left until its leftmost margin edge (or border edge if margins are absent) touches either the edge of the containing block, or the edge of another floated box
• If the size of the floated box exceeds the available horizontal space, the floated box will be shifted down
• Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of document flow
• Margins of floated boxes do not collapse with margins of adjacent boxes
• The root element (<html>) cannot be floated
• An inline element that is floated is converted to a block-level element

Float in Practice

One of the most common uses for the float property is to float an image with text wrapping it. Here is an example:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Lifesaver Image from stock.xchng

The CSS applied to the image in the box above is as follows:

img {
	float: left;
	margin: 0 15px 5px 0;
	border: solid 1px #bbb;
}

The only property required to make this effect work is the float property. The other properties (margin and border) are there for aesthetic reasons. The other elements inside the box (the <p> tags with text inside them) do not need any styles applied to them.

As mentioned earlier, floated elements are taken out of document flow, and other block elements remain in flow, acting as if the floated element is not even there. This is demonstrated visually below:

In the above example, the <p> element is a block-level element, so it ignores the floated element, spanning the width of the container (minus padding). All non-floated, block-level elements will behave in like manner.

The text in the paragraph is inline, so it flows around the floated element. The floated box is also given margin settings to offset it from the paragraph, making it visually clear that the paragraph element is ignoring the floated box.

Clearing Floats

Layout issues with floats are commonly fixed using the CSS clear property, which lets you “clear” floated elements from the left or right side, or both sides, of an element.

Let’s take a look at an example that commonly occurs — a footer wrapping to the right side of a 2-column layout:

If you view this page in IE6 or IE7, you won’t see any problems. The left and right columns are in place, and the footer is nicely tucked underneath. But in Firefox, Opera, Safari, and Chrome, you’ll see the footer jump up beside the left column. This is caused by the float applied to the columns. This is the correct behaviour, even though it is a more problematic one. To resolve this issue, we use the aforementioned clear property, applied to the footer:

#footer {
	clear: both;
}

The result is shown below:

The clear property will clear only floated elements, so applying clear: both to both columns would not cause the footer to drop down, because the footer is not a floated element.

So use clear on non-floated elements, and even occasionally on floated elements, to force page elements to occupy their intended space.

Fixing the Collapsed Parent

One of the most common symptoms of float-heavy layouts is the “collapsing parent”. This is demonstrated in the example below:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Notice that the bottom of the floated image appears outside its parent. The parent does not fully expand to hold the floated image. This is caused by what we discussed earlier: the floated element is out of the natural document flow, so all block elements will render as if the floated element is not even there. This is not a CSS bug; it’s in line with CSS specifications. All browsers render the same in this example. It should be pointed out that, in this example, adding a width to the container prevents the issue from occurring in IE, so this would normally be something you would have to resolve in Firefox, Opera, Safari, or Chrome.

Solution 1: Float the container

The easiest way to fix this problem is to float the containing parent element:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Now the container expands to fit all the child elements. But unfortunately this fix will only work in a limited number of circumstances, since floating the parent may have undesirable effects on your layout.

Solution 2: Adding Extra Markup

This is an outdated method, but is an easy option. Simply add an extra element at the bottom of the container and “clear” it. Here’s how the HTML would look after this method is implemented:

<div id="container">
<img src="http://blog.theunical.com/wp-content/plugins/wp-o-matic/cache/11236_lifesaver.jpg" width="200" height="222" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>

	<div class="clearfix"></div>
</div>

And the resulting CSS applied to the new element:

.clearfix {
	clear: both;
}

You could also do this by means of a <br /> tag with an inline style. In any case, you will have the desired result: the parent container will expand to enclose all of its children. But this method is not recommended since it adds nonsemantic code to your markup.

Solution 3: The :after Pseudo-Element

The :after pseudo-element adds an element to the rendered HTML page. This method has been used quite extensively to resolve float-clearing issues. Here is how the CSS looks:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

The CSS class “clearfix” is applied to any container that has floating children and does not expand to enclose them.

But this method does not work in Internet Explorer up to version 7, so an IE-only style needs to be set with one of the following rules:

.clearfix {
	display: inline-block;
}

.clearfix {
	zoom: 1;
}

Depending on the type of issue you’re dealing with, one of the above two solutions will resolve the issue in Internet Explorer. It should be noted that the zoom property is a non-standard Microsoft proprietary property, and will cause your CSS to become invalid.

So, because the :after pseudo-element solution does not work in IE6/7, is a little bit bloated code-wise, and requires additional invalid IE-only styles, this solution is not the best method, but is probably the best we’ve considered so far.

Solution 4: The Overflow Property

By far the best, and easiest solution to resolve the collapsing parent issue is to add overflow: hidden or overflow: auto to the parent element. It’s clean, easy to maintain, works in almost all browsers, and does not add extra markup.

You’ll notice I said “almost” all browsers. This is because it does not work in IE6. But, in many cases, the parent container will have a set width, which fixes the issue in IE6. If the parent container does not have a width, you can add an IE6-only style with the following code:

// This fix is for IE6 only
.clearfix {
	height: 1%;
	overflow: visible;
}

In IE6, the height property is incorrectly treated as min-height, so this forces the container to enclose its children. The overflow property is then set back to “visible”, to ensure the content is not hidden or scrolled.

The only drawback to using the overflow method (in any browser) is the possibility that the containing element will have scrollbars or hide content. If there are any elements with negative margins or absolute positioning inside the parent, they will be obscured if they go beyond the parent’s borders, so this method should be used carefully. It should also be noted that if the containing element has to have a specified height, or min-height, then you would definitely not be able to use the overflow method.

So, there really is no simple, cross-browser solution to the collapsing parent issue. But almost any float clearing issue can be resolved with one of the above methods.

Float-Related Bugs in Internet Explorer

Over the years, there have been numerous articles published online that discuss common bugs in connection with floats in CSS layouts. All of these, not surprisingly, deal with problems specific to Internet Explorer. Below, you’ll find a list of links to a number of articles that discuss float-related issues in-depth:

• The Internet Explorer Guillotine Bug
• The IE5/6 Doubled Float-Margin Bug
• IE7 Bottom Margin Bug
• The IE Escaping Floats Bug
• The IE6 Peekaboo Bug
• The IE6 “Ghost Text” Bug
• The IE6 Expanding Box Problem
• The IE6 3-pixel Gap

Changing the Float Property with JavaScript

To change a CSS value in JavaScript, you would access the style object, converting the intended CSS property to “camel case”. For example, the CSS property “margin-left” becomes marginLeft; the property background-color becomes backgroundColor, and so on. But with the float property, it’s different, because float is already a reserved word in JavaScript. So, the following would be incorrect:

myDiv.style.float = "left";

Instead, you would use one of the following:

// For Internet Explorer
myDiv.style.styleFloat = "left";

// For all other browsers
myDiv.style.cssFloat = "left";

Practical Uses for Float

Floats can be used to resolve a number of design challenges in CSS layouts. Some examples are discussed here.

2-Column, Fixed-Width Layout

Roger Johansson of 456 Berea Street outlines an 8-step tutorial to create a simple, cross-browser, 2-column, horizontally centered layout. The float property is integral to the chemistry of this layout.

“The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.”

Simple 2 column CSS layout

3-Column, Equal-Height Layout

Petr Stanicek of pixy.cz demonstrates a cross-browser 3-column layout, again using float:

“No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns. The left and right columns have fixed width (150px), the middle one is elastic.”

3-Column Layout with CSS

Floated Image with Caption

Similar to what we discussed earlier under “Float in Practice”, Max Design describes how to float an image with a caption, allowing text to wrap around it naturally.

Floating an Image and Caption

Horizontal Navigation with Unordered Lists

The float property is a key ingredient in coding sprite-based horizontal navigation bars. Chris Spooner of Line25 describes how to create a Menu of Awesomeness, in which the <li> elements that hold the navigation buttons are floated left:

How to Create a CSS Menu Using Image Sprites

To demonstrate the importance of the float property in this example, here is a screen shot of the same image after using firebug to remove the float: left:

Grid-Based Photo Galleries

A simple use for the float property is to left-float a series of photos contained in an unordered list, which gets the same result as what you would see in a table-based layout.

Foremost Canada’s product page (above) displays their products in grid-based format, next to a left-column sidebar. The photos are displayed in an unordered list with the float property for all <li> elements set to float: left. This works better than a table-based grid, because the number of photos in the gallery can change and the layout would not be affected.

Paragon Furniture’s futons page (above) is another example of a product page using an unordered list with floated list items.

iStockphoto’s search results page (above) is a similarly-structured grid of photos, but this time the photos are contained in left-floated <div> elements, instead of <li> elements.

Aligning an <input> Field with a Button

Default styling on form elements across different browsers can be a pain to deal with. Often times, in a single-field form like a search form, it is necessary to place the <input> element next to the submit button. Here is a simple search form, with an image used for the submit button:

In every browser, the result is the same: The button appears slightly higher than the input field. Changing margins and padding does nothing. The simple way to fix this is to float the input field left, and add a small right margin. Here is the result:

Conclusion

As was mentioned at the outset, without the CSS float property, table-less layouts would be, at worst, impossible, and, at best, unmaintainable. Floats will continue to be prominent in CSS layouts, even as CSS3 begins to gain prominence — even though there have been a few discussions about layouts without the use of floats.

Hopefully this discussion has simplified some of the mysteries related to floats, and provided some practical solutions to a number of issues faced by CSS developers today.

Further Reading

• Sitepoint CSS Reference: Float
• All About Floats on CSS-Tricks
• Float Layouts @ The Autistic Cuckoo
• Simple Clearing of Floats
• Visual Formatting Model: Floats
• Floating and Clearing

About the Author

Louis Lazaris is a writer and freelance Web Developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.

Louis Lazaris for Smashing Magazine

1. PHP

http://www.addedbytes.com/cheat-sheets/php-cheat-sheet/

2. MySQL

http://www.addedbytes.com/cheat-sheets/mysql-cheat-sheet/

3. JavaScript

http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/

4. CSS

http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

5. Regular Expressions

http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/

6. Apache’s mod_rewrite

http://www.addedbytes.com/apache/mod_rewrite-cheat-sheet/

7. jQuery

http://acodingfool.typepad.com/blog/pdf/jquery_1.3_cheatsheet_v1.pdf

8. HTML

http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/

9. HTML Character Entities

http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/

10. RGB Hex Color Codes

http://www.addedbytes.com/cheat-sheets/colour-chart/

11. .htaccess

http://www.thejackol.com/htaccess-cheatsheet/

12. Apache

http://www.petefreitag.com/cheatsheets/apache/

13. SEO

http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet

14. Gmail

http://www.marcofolio.net/cheat_sheets/gmail_keyboard_shortcuts_cheat_sheet.html

15. HTML5

http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/

16. Google Analytics

http://www.searchenginejournal.com/the-huge-collection-of-google-analytics-tips/7426/

17. WordPress Cheat Sheets

http://speckyboy.com/2009/06/17/14-essential-wordpress-development-and-design-cheat-sheets/

18. Subversion

http://www.addedbytes.com/cheat-sheets/subversion-cheat-sheet/

19. Eclipse

http://refcardz.dzone.com/refcardz/getting-started-eclipse?oid=hom7187

20. Google Search Engine

http://www.google.com/help/cheatsheet.html

21. Twitter

http://jasontheodor.com/2009/04/28/twitter-tweet-sheet-2/

22. CakePHP

http://cakephp.org/files/Resources/CakePHP-1.2-Cheatsheet.pdf

23. Joomla

http://www.younic.de/joomla-basic-template-cheatsheet

24. CodeIgniter

http://designfellow.com/blog/freebies/codeigniter-quick-reference-cheat-sheet-version-2-0-released/

25. Drupal

http://www.inmensia.com/files/pictures/internal/CheatSheetDrupal4.7.png

26. Firebug

http://duvet-dayz.com/firebug-cheatsheet/

These entities are all new in HTML 4.0 and may not be supported by old browsers. Support in recent browsers is good.

>ε

d>∼

Character	Entity	Decimal	Hex	Rendering in Your Browser
				Entity	Decimal	Hex
Latin small f with hook = function = florin	ƒ	ƒ	ƒ	ƒ	ƒ	ƒ
Greek capital letter alpha	Α	Α	Α	Α	Α	Α
Greek capital letter beta	Β	Β	Β	Β	Β	Β
Greek capital letter gamma	Γ	Γ	Γ	Γ	Γ	Γ
Greek capital letter delta	Δ	Δ	Δ	Δ	Δ	Δ
Greek capital letter epsilon	Ε	Ε	Ε	Ε	Ε	Ε
Greek capital letter zeta	Ζ	Ζ	Ζ	Ζ	Ζ	Ζ
Greek capital letter eta	Η	Η	Η	Η	Η	Η
Greek capital letter theta	Θ	Θ	Θ	Θ	Θ	Θ
Greek capital letter iota	Ι	Ι	Ι	Ι	Ι	Ι
Greek capital letter kappa	Κ	Κ	Κ	Κ	Κ	Κ
Greek capital letter lambda	Λ	Λ	Λ	Λ	Λ	Λ
Greek capital letter mu	Μ	Μ	Μ	Μ	Μ	Μ
Greek capital letter nu	Ν	Ν	Ν	Ν	Ν	Ν
Greek capital letter xi	Ξ	Ξ	Ξ	Ξ	Ξ	Ξ
Greek capital letter omicron	Ο	Ο	Ο	Ο	Ο	Ο
Greek capital letter pi	Π	Π	Π	Π	Π	Π
Greek capital letter rho	Ρ	Ρ	Ρ	Ρ	Ρ	Ρ
Greek capital letter sigma	Σ	Σ	Σ	Σ	Σ	Σ
Greek capital letter tau	Τ	Τ	Τ	Τ	Τ	Τ
Greek capital letter upsilon	Υ	Υ	Υ	Υ	Υ	Υ
Greek capital letter phi	Φ	Φ	Φ	Φ	Φ	Φ
Greek capital letter chi	Χ	Χ	Χ	Χ	Χ	Χ
Greek capital letter psi	Ψ	Ψ	Ψ	Ψ	Ψ	Ψ
Greek capital letter omega	Ω	Ω	Ω	Ω	Ω	Ω
Greek small letter alpha	α	α	α	α	α	α
Greek small letter beta	β	β	β	β	β	β
Greek small letter gamma	γ	γ	γ	γ	γ	γ
Greek small letter delta	δ	δ	δ	δ	δ	δ
Greek small letter epsilon	ε	ε	ε	ε	ε
Greek small letter zeta	ζ	ζ	ζ	ζ	ζ	ζ
Greek small letter eta	η	η	η	η	η	η
Greek small letter theta	θ	θ	θ	θ	θ	θ
Greek small letter iota	ι	ι	ι	ι	ι	ι
Greek small letter kappa	κ	κ	κ	κ	κ	κ
Greek small letter lambda	λ	λ	λ	λ	λ	λ
Greek small letter mu	μ	μ	μ	μ	μ	μ
Greek small letter nu	ν	ν	ν	ν	ν	ν
Greek small letter xi	ξ	ξ	ξ	ξ	ξ	ξ
Greek small letter omicron	ο	ο	ο	ο	ο	ο
Greek small letter pi	π	π	π	π	π	π
Greek small letter rho	ρ	ρ	ρ	ρ	ρ	ρ
Greek small letter final sigma	ς	ς	ς	ς	ς	ς
Greek small letter sigma	σ	σ	σ	σ	σ	σ
Greek small letter tau	τ	τ	τ	τ	τ	τ
Greek small letter upsilon	υ	υ	υ	υ	υ	υ
Greek small letter phi	φ	φ	φ	φ	φ	φ
Greek small letter chi	χ	χ	χ	χ	χ	χ
Greek small letter psi	ψ	ψ	ψ	ψ	ψ	ψ
Greek small letter omega	ω	ω	ω	ω	ω	ω
Greek small letter theta symbol	ϑ	ϑ	ϑ	ϑ	ϑ	ϑ
Greek upsilon with hook symbol	ϒ	ϒ	ϒ	ϒ	ϒ	ϒ
Greek pi symbol	ϖ	ϖ	ϖ	ϖ	ϖ	ϖ
bullet = black small circle	•	•	•	•	•	•
horizontal ellipsis = three dot leader	…	…	…	…	…	…
prime = minutes = feet	′	′	′	′	′	′
double prime = seconds = inches	″	″	″	″	″	″
overline = spacing overscore	‾	‾	‾	‾	‾	‾
fraction slash	⁄	⁄	⁄	⁄	⁄	⁄
script capital P = power set = Weierstrass p	℘	℘	℘	℘	℘	℘
blackletter capital I = imaginary part	ℑ	ℑ	ℑ	ℑ	ℑ	ℑ
blackletter capital R = real part symbol	ℜ	ℜ	ℜ	ℜ	ℜ	ℜ
trade mark sign	™	™	™	™	™	™
alef symbol = first transfinite cardinal	ℵ	ℵ	ℵ	ℵ	ℵ	ℵ
leftwards arrow	←	←	←	←	←	←
upwards arrow	↑	↑	↑	↑	↑	↑
rightwards arrow	→	→	→	→	→	→
downwards arrow	↓	↓	↓	↓	↓	↓
left right arrow	↔	↔	↔	↔	↔	↔
downwards arrow with corner leftwards = carriage return	↵	↵	↵	↵	↵	↵
leftwards double arrow	⇐	⇐	⇐	⇐	⇐	⇐
upwards double arrow	⇑	⇑	⇑	⇑	⇑	⇑
rightwards double arrow	⇒	⇒	⇒	⇒	⇒	⇒
downwards double arrow	⇓	⇓	⇓	⇓	⇓	⇓
left right double arrow	⇔	⇔	⇔	⇔	⇔	⇔
for all	∀	∀	∀	∀	∀	∀
partial differential	∂	∂	∂	∂	∂	∂
there exists	∃	∃	∃	∃	∃	∃
empty set = null set = diameter	∅	∅	∅	∅	∅	∅
nabla = backward difference	∇	∇	∇	∇	∇	∇
element of	∈	∈	∈	∈	∈	∈
not an element of	∉	∉	∉	∉	∉	∉
contains as member	∋	∋	∋	∋	∋	∋
n-ary product = product sign	∏	∏	∏	∏	∏	∏
n-ary sumation	∑	∑	∑	∑	∑	∑
minus sign	−	−	−	−	−	−
asterisk operator	∗	∗	∗	∗	∗	∗
square root = radical sign	√	√	√	√	√	√
proportional to	∝	∝	∝	∝	∝	∝
infinity	∞	∞	∞	∞	∞	∞
angle	∠	∠	∠	∠	∠	∠
logical and = wedge	∧	∧	∧	∧	∧	∧
logical or = vee	∨	∨	∨	∨	∨	∨
intersection = cap	∩	∩	∩	∩	∩	∩
union = cup	∪	∪	∪	∪	∪	∪
integral	∫	∫	∫	∫	∫	∫
therefore	∴	∴	∴	∴	∴	∴
tilde operator = varies with = similar to	∼	∼	∼	∼	∼
approximately equal to	≅	≅	≅	≅	≅	≅
almost equal to = asymptotic to	≈	≈	≈	≈	≈	≈
not equal to	≠	≠	≠	≠	≠	≠
identical to	≡	≡	≡	≡	≡	≡
less-than or equal to	≤	≤	≤	≤	≤	≤
greater-than or equal to	≥	≥	≥	≥	≥	≥
subset of	⊂	⊂	⊂	⊂	⊂	⊂
superset of	⊃	⊃	⊃	⊃	⊃	⊃
not a subset of	⊄	⊄	⊄	⊄	⊄	⊄
subset of or equal to	⊆	⊆	⊆	⊆	⊆	⊆
superset of or equal to	⊇	⊇	⊇	⊇	⊇	⊇
circled plus = direct sum	⊕	⊕	⊕	⊕	⊕	⊕
circled times = vector product	⊗	⊗	⊗	⊗	⊗	⊗
up tack = orthogonal to = perpendicular	⊥	⊥	⊥	⊥	⊥	⊥
dot operator	⋅	⋅	⋅	⋅	⋅	⋅
left ceiling = APL upstile	⌈	⌈	⌈	⌈	⌈	⌈
right ceiling	⌉	⌉	⌉	⌉	⌉	⌉
left floor = APL downstile	⌊	⌊	⌊	⌊	⌊	⌊
right floor	⌋	⌋	⌋	⌋	⌋	⌋
left-pointing angle bracket = bra	⟨	〈	〈	〈	〈	〈
right-pointing angle bracket = ket	⟩	〉	〉	〉	〉	〉
lozenge	◊	◊	◊	◊	◊	◊
black spade suit	♠	♠	♠	♠	♠	♠
black club suit = shamrock	♣	♣	♣	♣	♣	♣
black heart suit = valentine	♥	♥	♥	♥	♥	♥
black diamond suit	♦	♦	♦	♦	♦	♦

]]> http://blog.theunical.com/creative-website-design/entities-for-symbols-and-greek-letters-special-characters/feed/ 0