Five new beautiful (and free) CSS templates
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.
Category: CSS Templates
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
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.
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
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.
@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.
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
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.
@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
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.
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!
*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!*
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.)
[...] Five new beautiful (and free) CSS templates (tags: css) [...]
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.
Really great templates, but I liked the green solutuins most. Fresh design, love this!