CSS Layouts useful info

Well I finally got round to learning how to do pure CSS layouts

I just thought I would post here and encourage anyone who hasn't looked into this yet checks out the following sites:

A brief intro and a good place to start if you want to get an intro then work out the rest for yourself:
http://www.thenoodleincident.com/tutorials/box_lesson/old/css_3box_plus_topbox.html
(strangely the image has gone all screwwy since two days ago.....)

Alternatively,
http://www.glish.com/css/
has a few good examples with full source code displayed for those people who just want to steal

and finally back to http://www.thenoodleincident.com to get some useful browser compatibility workarounds:
http://www.thenoodleincident.com/tutorials/box_lesson/index.html

I decided to look at the glish examples and try to recreate them all on my own. Its taken about an hour for me to produce the following, which I have uploaded to an old geocities site that I never use!! (sorry if you get popups!)

left column with fluid body: http://www.geocities.com/whataloadof_crap/pure_css/2_col_F-f.htm

left and right fixed columns with fluid center column: http://www.geocities.com/whataloadof_crap/pure_css/3_col_F-f-F.htm

left and right fixed columns with two fluid center columns (i made this one up all on my own -wheres the oh-so-proud-of-myself smilie? ): http://www.geocities.com/whataloadof_crap/pure_css/3_col_F-f-f-F.htm

Single column, fixed size, centered in the page: http://www.geocities.com/whataloadof_crap/pure_css/Centered.htm

multiple columns, all fluid: http://www.geocities.com/whataloadof_crap/pure_css/n_col_f-f-f.htm

multiple columns, fixed width, centered on page: http://www.geocities.com/whataloadof_crap/pure_css/Centered_n_col_F-F-F.htm

The point of this?? It's easier to do than using tables!! I always thought most people didn't do it because it was harder, but when you look at it it is sooooo much easier!!

//edit: I'm thinking of neatening up my code and turning these into tutorials to put on the web, but for the time being please feel free to nick my code if you want. The css files are all in the same folder, with the same names as the html documents but with .css extension....

Yay! Look's great, hope you have fun and hope to see those as tutorials. Even writing tutorials will help you more . Some cool stuff you should look into is being able to set the way the text is formated, from left to right, or right to left. You can get some cool effects like the scroll bar on the opposite side and such

I know. CSS is great, I'm just so happy about being able to lay out sites so quickly now, even complex ones. Yay yay yay. I will get the tutorials done when I can

*adds another postit onto screen*

I'll make sure I post if and when it gets done.

Cool! The real trick now is making sure all layouts look the same crossplatform

And I must have spent 30 seconds trying to figure out what a postit was

Isnt it a shame that *peach* IE doesnt fully support CSS 2 so it cant be fully exploited. And its the most used browser out there? I see it losing its crown someday soon, and I hope to god its sooner rather than later. Why dont they just release an update? Coz theyre stuck up their own arses is what I think.

I get everyone I know to convert to Mozilla Firefox, so if everyone did the same, its all good for us web designers alike. Microsoft is really pissin me off recently and this CSS malarky is just another reason to dislike them. Your designs are lookin cool btw, ive got a good book on css to learn it - 'Designing CSS Web Pages'. Ill post my site on here for a review when its done.

Good luck.

Uzzo, who wrote the book? Eric Meyer is an excellent author of several CSS books too.

Yeah it is a shame about msie not supporting css2 properly. But Microsoft will be microsoft and up their own ass! Figures do show that use of microsoft IE is dropping; slowly but it IS happening. They are also slowly losing dominance in the OS wars as well. They will change or die. Either is a great outcome for everyone!

Your comment has reminded me of another link to add to my list:
http://www.meyerweb.com/eric/css/edge/menus/demo.html
pure css menus! Like drop down, then expanding to the side! All in css with no javascript! Doesn't work in ie lol. I haven't looked through how it is done yet but it's worth a glance just to marvel at how good some people's problem solving skills are

I've changed the focus of my tutorial idea, I think I'm just going to look at the possibe different ways of various layouts, the pros, cons and compatible issues and try to work through it all as much as I can without consulting other sources.

This will probably make for quite dull reading but I should be an expert in a few months . And at least I will be able to put together a wide selection of layouts really quickly with ease. I'm only just starting to appreciate the flexibility that there is when you break away from the table method.

Ho hum back to tidying, my parents come home from holiday tomorrow, and I have trashed the house (except my room - my room is nice and tidy )

The book's written by Christopher Schmitt. Its available in the UK by New Riders Publishers and the ISBN number is 0-7357-1263-8. I found it an excellent purchase in terms of the price and how good it was for information. The Foreword on it is by Eric Meyers.

I used glish.com's examples here on my site: http://conorific.com/orig and http://conorific.com/porn. I learned something new about CSS, even though I used their source code, I modified it so I saw how it worked. Excellent post.

You can't beat New Riders! Everything I've read published by NR has been excellent!