Floated layout

A recent question at the Style Master forum was a great opportunity to write this tutorial which walks through the float and clear properties to create a standards based layout like this. I've tried to create something which is easy to follow even for the relatively inexperienced.

One thing though: I'm always open to suggestion. I came up with this particular solution to the problem. If you've got something which you think is better or more elegant please do let me know.

Comments

[Anvilcloud]

This was indeed quite lucid, even for one who is relatively inexperienced. I'm still not sure how I would apply this to a form such as the one in my URL (if anyone should care to look). I was just trying this last night and resorted to a table, which I didn't want to do. I got a result of sorts with just CSS, but I couldn't get it to line up right. I know this is for comments and not questions, but I thought I would interject it since it seems relate to this tutorial.

I appreciate the post. Thanks.

[peabody]

In the "Finished CSS" shouldn't the '.clearboth {}' be '.seperator{}' ?

[Maxine]

>In the "Finished CSS" shouldn't the '.clearboth {}' be '.seperator{}' ?

It certainly should - all fixed now.

[Maxine]

And as for laying out forms, the Man in Blue is your man. Here's an excellent piece on laying out forms using web standards and CSS.

http://www.themaninblue.com/writing/perspective/2004/03/24/

You might want to particularly note this example here to see how you could create the page referred to above.

http://www.themaninblue.com/experiment/InForm/margin_hack.htm

It uses the same basic idea as I've used in the gallery tutorial above.

[Edd Hale]

IE is maddening--I looked at this in MacOS 9.2 using IE 5.1 and it does not display correctly at all. It wraps the second paragraph to the next line and does not center the content div. I played with it for a while and just gave up on trying to make it work right. I realize that few people use OS 9 any more. Also, I noticed that the "how I worked this out" link did not function either. Anyway, thanks for a nice tutorial.

[Anvilcloud]

Thanks for the link to The Man in Blue, Maxine. It's too much for me to wrap my head around just now, but I have bookmarked it for next time or for a spare moment. Right on.

[Boda]

The tutorial was excellent. You might want to have a look some usages and more examples in the page below http://www.immohit.ch
The layout behaves the same way in IE, Mozilla and Netscape.

[Ramm]

The tutorial is excellent. Do You have ukrainian or russian version of this tutorial?

[Suraj]

I wasn't able to understand how you created the thing what you call as 'rising tide' and also how you let the background still andlet the content in it scroll up and down.I am new to all this and am willing to learn it.Please tell me about it.Please!!

[cobweb]

Despite the fact that the Memento example page showed the same in FF as in IE 6, when I followed your step-by-step worked example, my IE result was all pushed to the left and the s were butted right up to the right edge of the photos, whereas it worked as it should in FF. Any idea why this should be so?

I can't see any difference in the CSS for either, but it behaves differently.