Five new beautiful (and free) CSS templates

By • December 10, 2007 • 14 Comments

I haven’t posted anything about free CSS templates for a while, simply because I haven’t seen anything worth mentioning. But CSS Creme, which is yet another CSS gallery site, has released five free CSS templates, which are real eye candy! Use them for your sites, or just for inspiration! One thing they’re missing, though, is a license of any kind. CSS Creme guys – if you’re reading this, I highly recommend putting a TOS (Terms of Service) somewhere on your site, and maybe a license file in the download zip file.

Aside from the free templates, the site has some pretty good stuff on it. First of all, their gallery has some amazing sites in it, which they say they pick themselves. You can browse the gallery according to category or color. They also have some fabulous free wallpaper, which could spice up your desktop, as well as interesting links in their News section.

CSS Creme free CSS templates»

Author:

Ben Tremblay

A nice selection … smooth.

But you know what I want for Christmas? I want to do what I’ve got happening on that frumpy old blogspot blog w/o tables: 2 columns, done so that the contents of the longest column flows under the shorter column. Is all.

cheers
–bentrem
Miriam

Ben – you ask for a lot from Santa! Do you mean that you want both columns to be the same height, regardless of how much content is in both of them? If so, there are a few CSS methods that do this. One is called Faux columns. But it’s definitely something that shouldn’t need a “hack” to accomplish.
Ryan

Ben – from your comment, it sounds like you want your blog to do what the blog in your link already does (http://mozdawg.blogspot.com/). Ie: the main content flows around sidebar on the right.

That is because the sidebar is set to float:right.

Either that or you mean you want columns of equal height, in which case either use Faux Columns as Miriam suggested, or try some of the more advanced CSS techniques for equalising columns.

Paul O’Brien has some good demos of various advanced column equalising techniques … http://pmob.co.uk/pob/equal-columns.htm
Ryan

Some of those themes have messed up CSS in them. For example, try resizing the text in this one:
http://www.csscreme.com/freetemplates/quartz_istorage/

The design breaks at anything but the default text size.
Ben Tremblay

@Miriam … sorry? “The contents of the longer column flow under the shorter” … I don’t know where “both the same height” came from. And anyhow, the link to my frumpy old blog is there for you to see.

My point: regardless how much or how little contents, columns reach “all the way down to the ground” … meaning huge slabs of blank … which strikes me as just.plain.wrong … but mebbe that’s just me.
Ben Tremblay

p.s. what I mean is that the column with the greatest “height” should expand to take up the space previously used by the shorter column (which, of course, ended first).
viz.: http://bentrem.sycks.net/images/mozdawg.gif
Ryan

Ah, I get it now. That would be very tricky. You can do it if you KNOW that one column will be shorter than the other, but I can’t think of anyway to do it otherwise.
Ben Tremblay

@Ryan Ayup, you got it. And yes, that’s the constraint. But when you know that’s going to be the case (such as the mainpage of a blog in many/most cases).

Can be done? I racked up quite a list of CSS galleries in my search and found naught … is why MozDawg is still tables … please, pass me a link. I’ll install it and kick it around. (I have a vague memory of having tried one that promised to do that trick but failed.)

^5
Ryan

You can do this easily with floats. Just put your small column in a block element (usually a DIV) and place it at the start of (but inside) the other columns block elment. Then set it to float:right in your CSS – or float:left if you want it on the left hand side.

Post back if that doesn’t make sense and I’ll put together a demo for you.
Ryan

Hang on a sec … ‘… is why MozDawg is still tables … ‘???

Are you referring to http://mozdawg.blogspot.com/? But that doesn’t use tables at all, it uses the method of explained above.

I’m very confused!
Ben Tremblay

*blush*

Someone wipe this egg off my face?

I was looking at the template I had stashed away as backup. Only it was an /old/ backup.
Yes indeed, I did find a way to do what I had wanted using only CSS.

Now I ask you, isn’t that the biggest brain.fart you’ve ever seen.

Sorry for the noise, Ryan.

*D’uh!*
Ben Tremblay

p.s. what makes this a matter of on-going curiosity to me: I frequently see pages where the 2nd (and sometimes the 2nd and 3rd) column/s end quite a bit earlier than the longest, but the longest doesn’t flow into that space, so a good 1/3rd and sometimes more of what should be valuable real-estate is left empty. (I really had forgotten that I’d already wrangled a solution.)
Pingback: links for 2007-12-13()
mynet

Some of those themes have messed up CSS in them. For example, try resizing the text in this one:
http://www.csscreme.com/freetemplates/quartz_istorage/
The design breaks at anything but the default text size.

Read previous post:

WordPress challenge: getting class current_page_item to work when home page is not blog

Sorry for the confusing title, but there is an issue that we face over and over when using WordPress as…Continue...