Designing Websites for Kids: Trends and Best Practices

How would you like to design a beautiful, colorful, stimulating website that is captivating, memorable, and allows you to let your creative juices flow without the need to worry too much about usability and best practices? In today’s web design market, it’s rare that such a project would present itself — unless you were asked to design a website for children!

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-colors in Designing Websites for Kids: Trends and Best Practices

Herman’s Homepage

Hermans-colors in Designing Websites for Kids: Trends and Best Practices

Funbrain Playground

Funbrain-colors in Designing Websites for Kids: Trends and Best Practices

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.

Mickey-colors in Designing Websites for Kids: Trends and Best Practices

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

Playdoh-colors in Designing Websites for Kids: Trends and Best Practices

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

Fifi-happy in Designing Websites for Kids: Trends and Best Practices

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.

Disney-nature in Designing Websites for Kids: Trends and Best Practices

Discovery Kids uses an underwater theme.

Discovery-water in Designing Websites for Kids: Trends and Best Practices

Club Penguin presents an arctic theme.

Clubpenguin-snow in Designing Websites for Kids: Trends and Best Practices

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

Cbckids-trees in Designing Websites for Kids: Trends and Best Practices

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

Popcap-grass in Designing Websites for Kids: Trends and Best Practices

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-sound in Designing Websites for Kids: Trends and Best Practices

Mr. Rogers’ Neighborhood

Mrrogers-characters in Designing Websites for Kids: Trends and Best Practices

Disney Princess

Princess-big in Designing Websites for Kids: Trends and Best Practices

Thomas the Tank Engine

Thomas-sound in Designing Websites for Kids: Trends and Best Practices

Barney & Friends

Barney-sound in Designing Websites for Kids: Trends and Best Practices

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.

Webkinz-sound in Designing Websites for Kids: Trends and Best Practices

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.

Poissonrouge-big in Designing Websites for Kids: Trends and Best Practices

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

Rainbow-depth in Designing Websites for Kids: Trends and Best Practices

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.

Peppapig-nav in Designing Websites for Kids: Trends and Best Practices

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.

Winnie-nav in Designing Websites for Kids: Trends and Best Practices

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

Sesame-big in Designing Websites for Kids: Trends and Best Practices

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.

Mylittlepony-big in Designing Websites for Kids: Trends and Best Practices

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.

Paulys-flash in Designing Websites for Kids: Trends and Best Practices

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

Hotwheels-car in Designing Websites for Kids: Trends and Best Practices

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.

Roary-intro in Designing Websites for Kids: Trends and Best Practices

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.

Yahookids-nav in Designing Websites for Kids: Trends and Best Practices

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

Cbckids-video in Designing Websites for Kids: Trends and Best Practices

Yahoo! Kids Movie Guides

Yahookids-video in Designing Websites for Kids: Trends and Best Practices

National Geographic Kids – Videos

Ngkids-video in Designing Websites for Kids: Trends and Best Practices

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

Cbeebies-game in Designing Websites for Kids: Trends and Best Practices

Toy Story – Woody’s Big Escape

Toystory-game in Designing Websites for Kids: Trends and Best Practices

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

Pixarcars-create in Designing Websites for Kids: Trends and Best Practices

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

Pingu-coloring in Designing Websites for Kids: Trends and Best Practices

Crayola Digi-Color

Crayola-coloring in Designing Websites for Kids: Trends and Best Practices

Peppa Pig Colouring Pages

Peppapig-coloring in Designing Websites for Kids: Trends and Best Practices

Thomas and Friends Online Colouring

Thomas-coloring in Designing Websites for Kids: Trends and Best Practices

Teletubbies – Print To Color

Teletubbies-coloring in Designing Websites for Kids: Trends and Best Practices

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.

Discovery-cursor in Designing Websites for Kids: Trends and Best Practices

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.

Sesame-cursor in Designing Websites for Kids: Trends and Best Practices

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.

Pbs-nav in Designing Websites for Kids: Trends and Best Practices

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

Cbeebies-nav in Designing Websites for Kids: Trends and Best Practices

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

Bob-nav in Designing Websites for Kids: Trends and Best Practices

The Fifi and the Flowertots features a speaking navigation bar.

Fifi-nav in Designing Websites for Kids: Trends and Best Practices

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.

Spongebob-nav in Designing Websites for Kids: Trends and Best Practices

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

Hannah-nav in Designing Websites for Kids: Trends and Best Practices

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.

Inthenight-nav in Designing Websites for Kids: Trends and Best Practices

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.

Wb-structure in Designing Websites for Kids: Trends and Best Practices

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

Crayola-structure in Designing Websites for Kids: Trends and Best Practices

Neopets is also designed on a more structured grid.

Neopets-structure in Designing Websites for Kids: Trends and Best Practices

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.

Sikids-structure in Designing Websites for Kids: Trends and Best Practices

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.

Fisherprice-games in Designing Websites for Kids: Trends and Best Practices

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

Funbrain-education in Designing Websites for Kids: Trends and Best Practices

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.

Sesame-parent in Designing Websites for Kids: Trends and Best Practices

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

Ben10-parents in Designing Websites for Kids: Trends and Best Practices

Thomas the Tank Engine includes a “parents” link.

Thomas-parents in Designing Websites for Kids: Trends and Best Practices

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.


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.

© Louis Lazaris for Smashing Magazine, 2009.

50 Beautiful and Creative Blog Designs

Smashing-magazine-advertisement in 50 Beautiful and Creative Blog Designs
 in 50 Beautiful and Creative Blog Designs  in 50 Beautiful and Creative Blog Designs  in 50 Beautiful and Creative Blog Designs

Spacer in 50 Beautiful and Creative Blog Designs

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.

Jason-gray in 50 Beautiful and Creative Blog Designs

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.

Pixel-blog in 50 Beautiful and Creative Blog Designs

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.

Sushi in 50 Beautiful and Creative Blog Designs

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

Workawesome in 50 Beautiful and Creative Blog Designs

One by Four

Onebyfour in 50 Beautiful and Creative Blog Designs

Jason Santa Maria

Jason in 50 Beautiful and Creative Blog Designs

Dustin Curtis

Curtis in 50 Beautiful and Creative Blog Designs

Jack Cheng

30 in 50 Beautiful and Creative Blog Designs

New to York

Tyler in 50 Beautiful and Creative Blog Designs


31three in 50 Beautiful and Creative Blog Designs

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

Abduzeedo in 50 Beautiful and Creative Blog Designs


IA in 50 Beautiful and Creative Blog Designs

Darren Hoyt

Hoyt in 50 Beautiful and Creative Blog Designs

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

Point- 038 -anchor in 50 Beautiful and Creative Blog Designs

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.

TW in 50 Beautiful and Creative Blog Designs


Tumble in 50 Beautiful and Creative Blog Designs

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.

Fudge in 50 Beautiful and Creative Blog Designs

UX Booth

Uxbooth in 50 Beautiful and Creative Blog Designs

Daustralala in 50 Beautiful and Creative Blog Designs

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

Design-intellection in 50 Beautiful and Creative Blog Designs

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

The-biggest-apple in 50 Beautiful and Creative Blog Designs

árbol textual

Arbol in 50 Beautiful and Creative Blog Designs

Helium Workx

Hellium in 50 Beautiful and Creative Blog Designs


Argee in 50 Beautiful and Creative Blog Designs

Strip in 50 Beautiful and Creative Blog Designs

Mark Boulton

Boulton in 50 Beautiful and Creative Blog Designs

This is a working library

Working-library in 50 Beautiful and Creative Blog Designs (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.

Lamalla in 50 Beautiful and Creative Blog Designs

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.

Contrast in 50 Beautiful and Creative Blog Designs

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

Demain-jarette in 50 Beautiful and Creative Blog Designs

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.

Fran-fernandez in 50 Beautiful and Creative Blog Designs

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.

Stereo-super in 50 Beautiful and Creative Blog Designs

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.

Music-city in 50 Beautiful and Creative Blog Designs

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

Tal 038 Acacia in 50 Beautiful and Creative Blog Designs

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.

Hello in 50 Beautiful and Creative Blog Designs

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?

Mulletized in 50 Beautiful and Creative Blog Designs

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

Mk3 in 50 Beautiful and Creative Blog Designs

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).

Forrester in 50 Beautiful and Creative Blog Designs

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.

Jord 038 Chan in 50 Beautiful and Creative Blog Designs

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

Cognition in 50 Beautiful and Creative Blog Designs

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

JonahL in 50 Beautiful and Creative Blog Designs

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

Muller in 50 Beautiful and Creative Blog Designs

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

Tripping-words in 50 Beautiful and Creative Blog Designs

The Swish Life Magazine

Swish-life in 50 Beautiful and Creative Blog Designs


Meson-projekt in 50 Beautiful and Creative Blog Designs


Design-critique in 50 Beautiful and Creative Blog Designs

Manuel Romero

Manuel in 50 Beautiful and Creative Blog Designs

Related Articles


© Julia May for Smashing Magazine, 2009. | Permalink | 21 comments | Add to | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,

The Mystery Of The CSS Float Property

Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

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 - Floats
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.


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:

Float - Lifesaver

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:

This box is floated left

This <p> element has a different background color to show that it spans the width of its parent, ignoring the floated element. This inline text, however, wraps around the floated box.

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:

Left column floated left

Right column also floated left


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:

Left column floated left

Right column also floated left


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:

Float - Lifesaver

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:

Float - Lifesaver

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="" 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>

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:

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: = "left";

Instead, you would use one of the following:

// For Internet Explorer = "left";

// For all other browsers = "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.”

2-Column Layout
Simple 2 column CSS layout

3-Column, Equal-Height Layout

Petr Stanicek of 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
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.

Floated Image with Caption
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:

Menu of Awesomeness
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:

Menu of Awesomeness without Float

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

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

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:


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

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

25+ Must-Have Cheat Sheets for Web Developers

Who wants to go to Google or break out the library of programming books every single time you get stuck on something? Below is a compilation of extremely useful cheat sheets, which can be printed, laminated and placed nearby for easy reference while doing your web development and design. Everyone has moments where a function cannot be remembered, and that is where these cheat sheets can be lifesavers. Bookmark this page for an easy portal to all of the cheat sheets, or an individual page if you find it helpful. Please don’t hesitate to post any cheat sheets we neglected to include, for this is about sharing knowledge.

1. PHP

PHP Cheat Sheet

2. MySQL

MySQL Cheat Sheet

3. JavaScript

JavaScript Cheat Sheet

4. CSS

CSS Cheat Sheet

5. Regular Expressions

Regular Expressions Cheat Sheet

6. Apache’s mod_rewrite

mod_rewrite Cheat Sheet

7. jQuery

jQuery Cheat Sheet


HTML Cheat Sheet

9. HTML Character Entities

HTML Entities Cheat Sheet

10. RGB Hex Color Codes

RGB Color Codes Cheat Sheet

11. .htaccess

.htaccess Cheat Sheet

12. Apache

Apache Cheat Sheet

13. SEO

SEO Cheat Sheet

14. Gmail

Gmail Cheat Sheet

15. HTML5

HTML5 Cheat Sheet

16. Google Analytics

Google Analytics Cheat Sheet

17. WordPress Cheat Sheets

WordPress Cheat Sheets

18. Subversion

Subversion Cheat Sheet

19. Eclipse

Eclipse Cheat Sheet

20. Google Search Engine

Google Cheat Sheet

21. Twitter

Twitter Cheat Sheet

22. CakePHP

CakePHP Cheat Sheet

23. Joomla

Joomla 1.5 Cheat Sheet

24. CodeIgniter

CodeIgniter Cheat Sheet

25. Drupal

Drupal Cheat Sheet

26. Firebug

Firebug Cheat Sheet

Top 71 CSS Menus Navigation Tabs: Free download

1. 11 CSS navigation menus : at Exploding Boy
2. 12 more CSS Navigation Menus. : at Exploding Boy
3. 14 Free Vertical CSS Menus : at Exploding Boy
4. 2-level horizontal navigation : demo at Duoh
5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
6. Accessible Image-Tab Rollovers : demo at Simplebits
7. ADxMenu : multiple menu examples at aPlus
8. A drop-down theme : at CSS Play
9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
10. Bulletproof Slants : demo at Simplebits
11. Centered Tabs with CSS : at 24ways
12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
14. Creating Indented Navigation Lists : A multi-level indented list
15. Creating Multicolumn Lists : at
16. cssMenus – 4 Level Deep List Menu : at SolarDreamStudios
17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
18. CSS-Based Tabbed Menu : a simple tabbed menu.
19. CSS-based Navigation : demo at Nundroo
20. CSS: Double Lists : A single list that appears in two columns
21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
22. CSS only dropdown menu : at CSS Play
23. CSS only flyout menus : at CSS Play
24. CSS only flyout/dropdown menu : at CSS Play
25. CSS only flyout menu with transparency : at CSS Play
26. CSS only vertical sliding menu : at CSS Play
27. CSS Swag: Multi-Column Lists : at A List Apart
28. CSS Tabs : tabs without any images
29. CSS Tabs : list of various tab solutions
30. CSS tabs with Submenus : at Kalsey.
31. dTree Navigation Menu : Javascripts Tree at Destroydrop
32. Definition lists – misused or misunderstood? : appropriate uses of definition lists
33. Do You Want To Do That With CSS? – Multiple Column Lists : multi-column lists.
34. Drop-Down Menus, Horizontal Style : at A List Apart
35. Float Mini tabs : at Web-Graphics
36. Flowing a List Across Multiple Columns : A table without using tables.
37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
39. Hidden tab menu : at CSS Play
40. How to Style a Definition List with CSS : at WebReference
41. How to Style an Unordered List with CSS : at WebReference
42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
43. Hybrid CSS Dropdowns : at a List Apart
44. Inline Mini Tabs : at Web-Graphics
45. Intelligent Menus : CSS and PHP menu at
46. Inverted Sliding Doors Tabs : at 456BereaStreet
47. Light Weight Multi Level Menu : at CssCreator
48. List Display Problems In Explorer For Windows : list hack for IE
49. Listamatic : simple lists; various styles.
50. Listamatic2 : nexted lists; various styles
51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
52. Mini-Tab Shapes : demo at Simplebits
53. Mini-Tab Shapes 2 : demo at Simplebits
54. More than Just Bullets : at
55. Multiple Column Lists : at css-discuss
56. A Navbar Using Lists : A lightweight nav bar at WestCiv
57. Navigation Matrix Reloaded : at SuperfluousBanter
58. Remote Control CSS : examples of lists styled differently
59. Remote Control CSS Revisited – Caving in to peer pressure : multi-column remote control
60. Rounding Tab Corners : by Eric A. Meyer.
61. Simple CSS Tabs : at SilverOrange
62. Simplified CSS Tabs : demo at Simplebits
63. Sliding Doors : at A List Apart
64. Spruced-Up Site Maps : sitemaps as lists
65. Styling Nested List : at SimpleBits
66. Suckerfish Dropdowns : at HTMLDog
67. Tabtastic : Gavin Kistner.
68. Tabs Tutorial at BrainJar
69. Taming Lists : at A List Apart
70. Turning a List into a Navigation Bar : at 456BereaStreet
71. Ultimate css only dropdown menu : at CSS Play

Guidence sites to css

Entities for Symbols and Greek Letters — Special Characters

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for symbols and Greek letters, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

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

Character Entity Decimal Hex Rendering in Your Browser
Entity Decimal Hex
Latin small f with hook = function = florin ƒ ƒ &#x192; ƒ ƒ ƒ
Greek capital letter alpha Α Α &#x391; Α Α Α
Greek capital letter beta Β Β &#x392; Β Β Β
Greek capital letter gamma Γ Γ &#x393; Γ Γ Γ
Greek capital letter delta Δ Δ &#x394; Δ Δ Δ
Greek capital letter epsilon Ε Ε &#x395; Ε Ε Ε
Greek capital letter zeta Ζ Ζ &#x396; Ζ Ζ Ζ
Greek capital letter eta Η Η &#x397; Η Η Η
Greek capital letter theta Θ Θ &#x398; Θ Θ Θ
Greek capital letter iota Ι Ι &#x399; Ι Ι Ι
Greek capital letter kappa Κ Κ &#x39A; Κ Κ Κ
Greek capital letter lambda Λ Λ &#x39B; Λ Λ Λ
Greek capital letter mu Μ Μ &#x39C; Μ Μ Μ
Greek capital letter nu Ν Ν &#x39D; Ν Ν Ν
Greek capital letter xi Ξ Ξ &#x39E; Ξ Ξ Ξ
Greek capital letter omicron Ο Ο &#x39F; Ο Ο Ο
Greek capital letter pi Π Π &#x3A0; Π Π Π
Greek capital letter rho Ρ Ρ &#x3A1; Ρ Ρ Ρ
Greek capital letter sigma Σ Σ &#x3A3; Σ Σ Σ
Greek capital letter tau Τ Τ &#x3A4; Τ Τ Τ
Greek capital letter upsilon Υ Υ &#x3A5; Υ Υ Υ
Greek capital letter phi Φ Φ &#x3A6; Φ Φ Φ
Greek capital letter chi Χ Χ &#x3A7; Χ Χ Χ
Greek capital letter psi Ψ Ψ &#x3A8; Ψ Ψ Ψ
Greek capital letter omega Ω Ω &#x3A9; Ω Ω Ω
Greek small letter alpha α α &#x3B1; α α α
Greek small letter beta β β &#x3B2; β β β
Greek small letter gamma γ γ &#x3B3; γ γ γ
Greek small letter delta δ δ &#x3B4; δ δ δ
Greek small letter epsilon ε ε &#x3B5; ε ε ε
Greek small letter zeta ζ ζ &#x3B6; ζ ζ ζ
Greek small letter eta η η &#x3B7; η η η
Greek small letter theta θ θ &#x3B8; θ θ θ
Greek small letter iota ι ι &#x3B9; ι ι ι
Greek small letter kappa κ κ &#x3BA; κ κ κ
Greek small letter lambda λ λ &#x3BB; λ λ λ
Greek small letter mu μ μ &#x3BC; μ μ μ
Greek small letter nu ν ν &#x3BD; ν ν ν
Greek small letter xi ξ ξ &#x3BE; ξ ξ ξ
Greek small letter omicron ο ο &#x3BF; ο ο ο
Greek small letter pi π π &#x3C0; π π π
Greek small letter rho ρ ρ &#x3C1; ρ ρ ρ
Greek small letter final sigma ς ς &#x3C2; ς ς ς
Greek small letter sigma σ σ &#x3C3; σ σ σ
Greek small letter tau τ τ &#x3C4; τ τ τ
Greek small letter upsilon υ υ &#x3C5; υ υ υ
Greek small letter phi φ φ &#x3C6; φ φ φ
Greek small letter chi χ χ &#x3C7; χ χ χ
Greek small letter psi ψ ψ &#x3C8; ψ ψ ψ
Greek small letter omega ω ω &#x3C9; ω ω ω
Greek small letter theta symbol ϑ ϑ &#x3D1; ϑ ϑ ϑ
Greek upsilon with hook symbol ϒ ϒ &#x3D2; ϒ ϒ ϒ
Greek pi symbol ϖ ϖ &#x3D6; ϖ ϖ ϖ
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
logical and = wedge
logical or = vee
intersection = cap
union = cup
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
black spade suit
black club suit = shamrock
black heart suit = valentine
black diamond suit