12 Cool CSS-based Layouts

Yeah, yeah. Don’t use tables. Blah blah blah. Use CSS and all that. CSS can be a pain at times (especially if you want it to work in Internet Explorer…), but it works really well…when it works. Really, if you’re making a new layout, use CSS. Here are some really cool CSS-based layouts. Inspire yourself.

  • MediaTemple - This web host has a really cool and professional layout. They’ve got a black header with shiny black “plastic” tabs. Drop-down menus come out from the tabs and the links in them are highlighted with a cool rounded-blue image. See for yourself.
  • Ars Technica - “The Art of Technology” is this tech blog’s tagline. Their layout is even better than their tagline. The header is a nice red, with navigational tabs along the bottom. Below that, it looks like the designer is a fan of cubism. Everything is in a box. It works well though, and is surprisingly well organized.
  • DHTMLSite - A spartan layout with a navigation bar at the top. The logo is right at the top of the left-hand column. Even though the layout is lightweight, it still looks crowded.
  • Wordpress.org - Not to be confused with Wordpress.com (the blog host), this is the site where you download the real Wordpress software (which is grwat by the way). The layout is reminiscent of a newspaper, being a light white-grey with black text and horizontal lines. Nice and uncluttered, it still looks great.
  • Good-Tutorials - Their layout changes too often, unfortunately (a couple of times a year it seems). The current one is well designed, featuring blue gradients, tan, and white very well. Uncluttered and well though-out, it’s pretty good for a tutorial site.
  • The Leaky Cauldron - Prepare to be blown away. This layout is all CSS and images. Easily edging out the Table-based Mugglenet.com which has a black background too), this is easily the best-designed Harry Potter site. That’s not an easy goal either, there are some amazing lesser-known ones. The Leaky Cauldron is the biggest HP site on the web (getting over 100,000 unique visitors a day). The layout is amazing, and AJAX is used quite well.
  • Feedo Style - ORANGE! Amazingly it’s not that hard on the eyes, andi t’s not that dreaded “Safety Orange” either. Horizontal navigation, one-column content, not too bad. The diagonal-line-gradient on the background is a nice touch as well.
  • Digital Web Magazine - Nice and clean. Blues, tan, white, etc. There’s a refreshing lack of advertisements as well. :)
  • PotterCast - Considering it’s a sub-site of the Leaky Cauldron, I’d expect no less. Probably the best layout I’ve seen on a podcast site so far, it looks very unique (without being totally off-the-wall).
  • YouTube - Airy (read: no visible lines around the edges), it looks very much like a Google site (despite not starting out as one).
  • PC World - Hmmm. Reminds be of Ars Technica a little… It looks different in several ways though. It’s a bit heavy, clocking in at 74 settings on 56k and 12 on a T1. Reds, greays, and white again. It’s very dynamic, and much more cluttered than Ars Technica.
  • Digg - Digg… Take a look at it yourself. The header’s the main part, and the lower segments are just divided by lines and padding. The header conveys an amazing array of information and navigation.

 

403 Forbidden

403 Forbidden
nginx