Friday, September 7th, 2007

Ajaxian Featured Tutorial: Understanding CSS floating

Category: CSS

One of the hardest concepts to grasp in CSS is how to float elements. In order to create a good layout you need to understand this concept in order to know how your elements will be handled within the flow of your page.

The team at Max Design have created an excellent tutorial, aptly called the Floatutorial, which provides a step-by-step explanation of how floating works.

Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

Posted by Rey Bango at 9:37 am

3.8 rating from 29 votes


Comments feed TrackBack URI

Slow day? That page has been around for years.

Comment by GregoryD — September 7, 2007

@Gregory: Not at all. If you look at the amount of content on Ajaxian today, you’ll see it’s a very busy day. I’m trying to provide tutorials for a variety of developers; both new and experienced. This page may be old to you but not to everyone and its a great explanation of a concept that new CSS developers struggle with.

Comment by Rey Bango — September 7, 2007

This is a bit dated, but still useful. One note, don’t forget to add display:inline; when floating elements for IE 6 – otherwise you’ll get the “double margin” bug (see related)

Comment by Scott Schiller — September 7, 2007

Excellent article. Not everyone on this site has as much design/css/usability knowledge (myself included) and these kinds of articles are usually those that have slipped under our radar. I’m very grateful for its posting and hope to see more like it in the future.

Comment by Jesse Kuhnert — September 7, 2007

@Scott: Thanks for the info

@Jesse: My pleasure. Its precisely why I wanted to post this type of tutorial. I know that many of these may not appeal to experienced developers and I’m okay with that. My intentions with the Ajax Featured Tutorial series is provide information that will help introduce developers to important JavaScript, DOM, Ajax, RIA & CSS concepts. I especially want to focus on developers who are new to these technologies as they are the ones that, at times, find it hard to get the right information. With that said, I will be posting tutorials for advanced developers as well.

Comment by Rey Bango — September 7, 2007

yeah, thanks for the article. I too don’t have good knowledge on CSS.

Comment by silent — September 7, 2007

Great for new developers! But why not learning them to good scripting (like instead of provided )

Comment by MysticEarth — September 7, 2007

Thanks Ray, this was a great tutorial.

Comment by Van — September 7, 2007

@MysticEarth: I’ll be posting tutorials on a variety of topics.
@Silent & Van: Thanks! :D

Comment by Rey Bango — September 7, 2007


I think that they are all related. A lot of really nice ajax solutions get created because of problems being addressed in the (generalizing a bit) css / design / usability / humane design – space. The two go hand in hand towards driving more innovation and more need for various types of tricks – which sometimes result in javascript being used.

I don’t think you’d be doing yourself any favors by learning one and not the other.

Comment by Jesse Kuhnert — September 7, 2007

these are a little 101, but that’s alright, I like what Rey is doing …personally I love the Gears and AIR tutorials. Please keep them flowing. (i assume memcached is outside the realm of Ajaxian??? probably so, that’s obviously up to you guys, but I’d love some tutorials on memcached if possible)

Comment by Mark Holton — September 7, 2007

Thanks for the information, Rey. I have been a developer for the past 18 years, but I have never really done any web development until now and this indeed is new to me. I admit it. :)

Comment by Kerry Sanders — September 7, 2007

@Mark: I’ll see what I can dig up. Thanks for the suggestion. If you have anymore ideas for tutorials, especially advanced ones, please feel free to email me at reybango (at) gmail (dot) com

@Kerry: I’m glad you found it useful. :)

Comment by Rey Bango — September 8, 2007

PHP this, RoR that… I was hoping Rey would have some CFAJAX tutorials, heh… take a look at the topics sidebar: PHP (75), Ruby(50) + Rails(25) = 75, and ColdFusion (5).

Comment by Mike Ritchie — September 8, 2007

Patience Mike. :)

Comment by Rey Bango — September 8, 2007

Why don’t any of these float tutorials mention the block formatting context – the most important CSS concept related to floats. Sheesh!

Comment by RichB — September 12, 2007

…will do, Rey, thanks

Comment by Mark Holton — September 12, 2007

@Jesse Kuhnert:
I see my post wasn’t posted good :) What I tried to say is why not start with good coding (like closing a BR element, which isn’t closed in the example provided). It is a good tutorial, and a good start for floating.

But I think the best start is creating proper code. With no proper code, bugs and other CSS problems (especially browser specific bugs) can occur much faster and are more difficult to debug.

For another in-depth floating tutorial/article, check this out:

Comment by MysticEarth — September 14, 2007

Here is good tutorial about CSS :
Here is good tutorial about AJAX :

Comment by Ajaxpert — November 19, 2007

Leave a comment

You must be logged in to post a comment.