Clear: Float

I like the irony in this… after my mention yesterday of pushing html around for almost a decade, I hit an obstacle laying out a footer in the new world of Table-free markup. I wrote and manipulated a pile of javascript and css to try and push a footer down beneath two “float:left” divs … if you’re familiar with the Float property, it has a strange way of causing its parent to stop inheriting its contents height and width … the purpose of float:left (or right) is to allow following (or previous in the case of right float) content to wrap around it (similar to when you align-left an image inside a paragraph). This is useful when you’re creating columns of content. The annoyance comes in when you’d like that “next” piece of content to stop wrapping up around the floated element. This is where the “clear float” css class comes in. After spending probably 2+ hours going around and around with trying to layout my footer, it was a simple css style, “clear:left” that did the trick I was looking for. I had seen the ‘clear’ property forever, but it never clicked for me. I haven’t been using the ‘float’ property very long either, so that may be why I was unfamiliar with its powerful counterpart … in essence the “clear” property breaks the chain of the float property to rather start its own new line.

About the Author, Wilson Revehl

Wilson Revehl is the co-founder and CTO of Go Media. He is a website & rich internet application designer & developer specializing in HTML, CSS, Javascript & PHP. Go Media is a Cleveland website design and development firm specializing in custom Wordpress websites, creative visual communications and resources for the graphic design community. Mr. Revehl runs the Fort Myers Technology Studio.

Discover More by Wilson Revehl


We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.