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.
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.
Posted by: Anvilcloud | April 27, 2005 at 12:39 AM
In the "Finished CSS" shouldn't the '.clearboth {}' be '.seperator{}' ?
Posted by: peabody | April 27, 2005 at 01:08 PM
>In the "Finished CSS" shouldn't the '.clearboth {}' be '.seperator{}' ?
It certainly should - all fixed now.
Posted by: Maxine | April 28, 2005 at 07:55 AM
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.
Posted by: Maxine | April 28, 2005 at 08:07 AM
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.
Posted by: Edd Hale | April 29, 2005 at 12:52 AM
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.
Posted by: Anvilcloud | May 03, 2005 at 10:34 AM
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.
Posted by: Boda | March 06, 2006 at 01:12 AM
The tutorial is excellent. Do You have ukrainian or russian version of this tutorial?
Posted by: Ramm | April 07, 2006 at 09:00 PM
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!!
Posted by: Suraj | June 05, 2006 at 07:41 PM
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.
Posted by: cobweb | August 16, 2006 at 07:39 AM