Create Sidebars of Equal Height with Faux Column
Faux Columns are not a new concept but one worth revisiting if it's not one that you normally use.
There are times when even the simplest of layouts take some serious brainstorming! One of those frustrating times is when you want to create a series of columns of equal height, but the content in one column might be longer than the next. Here’s where the Faux Column technique steps in, let’s take a look at how this solution can make even the most complicated layout a breeze to code up.
Create Sidebars of Equal Height with Faux Columns »
Iron Myers CSS Layouts
I don't think this is new but it's a great resource for CSS Layouts that have been tested in all browsers (even IE6!) and optimized for SEO, as well. Lots of styles to pick from. Make it an easy way to jump start a CSS layout.
CSS Layouts: A collection of 168 Grid and CSS Layouts
Excellent CSS Layout Resource
Here's a nice resource that's definitely worth a bookmark. Website ironmyers.com has collected up a great array of CSS Layouts. The link below goes to their 750px wide, fixed layouts. Via the top menu, there are also 950px wide, fixed layouts and 100%, fluid layouts.
The site's index page has a huge collection of CSS resource links as well.
750 pixel Pure CSS Layouts (Iron Myers)
CSSRand: Random CSS Gallery
CSSRand is sort of like StumbleUpon meets CSS Gallery without the toolbar.
Simply click on the CSSRand Logo (or press F5 on your keyboard) and you'll be transported to an inspirational CSS design. Press it again and be wisked off to visit another. I spent a bit of time with it this afternoon and I have to say, I like it. A great way to take an inspirational tour!
CSS Rand ~ The divine inspiration
Grid and Column Design Inspiration
From WebDesignerWall today, a whole bunch of grid and column based design inspiration. The 32 sites highlighted show how a grid based layout can be applied on various types of sites.
Grid and Column Designs (Web Designer Wall)
Basic CSS Templates at Layout Gala
Layout Gala! : a collection of 40 CSS layouts based on the same markup and ready for download. A great collection of CSS layouts that offer up a great starting point for a CSS page. I'm sure I've probably linked this up before but it's a great resouce and worth linking again.
Also on the CSS templates front, this article from Tech Magazine with a nice round-up of some free CSS templates from around the web. Worth a peek as well.
The Perfect Fluid Width Layout
What is the perfect fluid width layout? The author of CSS Tricks defines it as a layout that shrinks to 780 pixels (to accommodate 800px browsers and grows to 1260 pixels (to accommodate 1280px browsers, works in all major browsers, has sidebars of equal height to the main content and the has page content centered for users with even higher resolutions. And then he went ahead and built it.
The Perfect Fluid Width Layout.
Looks like it's worth a look for anyone looking for a solid fluid layout.
Free Online Web Template Generator
Free online web template generator is a handy tool to create a website design quickly and easily. Start with a base template, customize the colors, title, fonts and more and then download it for free.
Templates are valid XHTML and CSS, too.
Non-notorious CSS Website Templates
Non-notorious CSS templates for websites - links up some good looking, css templates that haven't (yet) become notorious for being everywhere.
Some nice templates and they are all free!
Boxed CSS: Free CSS Grid Layouts
Boxed CSS - Free CSS grids - a free website that offers CSS grid layouts in 2 and 3 column styles, fixed and fluid with both right or left sidebar.
Boxed CSS layouts are free to be downloaded and modified and there is no link-back requirement.
As an added bonus, Boxed CSS even explains how to add padding and margins without breaking the layout.
A handy resource!
Free Web Designs for Download
CSS Galleries: Free Web Designs for Download is a nice round-up of some of the nicer, newer sites offering up free website templates, many specifically for certain platforms as well (such as WordPress, Joomla etc.)
A really nice collection of CSS layouts
CSS Layouts is a really nice collection of templates that "will look and behave the same in internet browsers like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS layout has been optimized to give you the best possible search engine results. Use these CSS Layout anywhere you wish."
Available in 3 basic flavours - 750px wide, 950px wide or 100% (liquid). Click on the the desired size to be presented with a ton of layout variations . Click the one you want to download the layout source code.
Very nice and definitely bookmark worthy.
Build an image gallery that doesn't fall apart
Build an Image gallery that doesn't fall apart - when photos of different sizes are uploaded, specifically.
A nice "how-to" conquer the problem of css image galleries display with different sized images.
open source templates: free css and xhtml open source templates
Open Source Templates | Free CSS and XHTML Website Templates has just opened their doors as a showcase for free, open source templates. At open source templates, the community gets to pick the best designs to be showcased on the front page, making it easy to quickly find the best templates.
Right now the pickings are pretty slim, but I think it's a space to watch as a good resource for quality, open source css templates.
Nice collection of free faux column CSS layouts
Free Faux Column CSS Layouts - 42 of them to be exact, in a variety of layout styles.
___ layouts: YUI Grids-like CSS layout design
___layouts has got to win the award for the most interesting name I've come across in some time! The author admits he couldn't be bothered coming up with a name.
Once you get past the name though, there is a lot to take in here. ___ layouts is heavily inspired by YUI grids but aims to be easier to implement and accommodate the need for pixel perfect layouts as well.
There's a lot to take in here but it's well worth exploring and playing around with. There's also a handy layout builder for speedier and easier development.
12 Basic CSS Templates
12 Basic Free CSS Templates - 12 Starting points for your CSS based website some basic CSS templates to download as a quick start for web design, in a number of different layouts.
Sitchy McLayout: designing for a wide variety of screen sizes
A List Apart: Articles: Switchy McLayout: An Adaptive Layout Technique
"Switchy McLayout lets you define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes."
Uses screen size detection and javascript to switch classes.
One True Layout Code Generator
Example - In search of the One True Layout - One True Layout™ - Interactive Example - if you like the One True Layout, you'll love this interactive tool that lets you punch in some parameters and it will spit out the code for your (html and CSS).
Free CSS Layout Templates
Dynamic Drive CSS Layouts- Tableless, CSS based templates - a nice selection of CSS templates in fixed and fluid, 2 and 3 column varieties. All available for dowload.
Note also the left navigation, which will lead to horizontal and vertical CSS menus, form and image css and more.
Looks like Dynamic Drive aims to be about more than scripts.
Create a simple liquid layout
Create a simple liquid layout - .net magazine.
"John Oxton explores how to make a simple but effective liquid layout, which will work across browsers and uses absolute positioning."
CSS Layouts Galore
A couple of really good resources for css layouts, all a great starting point for your next great css design.
39 Free CSS Layouts
Code-Sucks.com - CSS Layouts - a handy bookmark for a quick and easy css layout resource.
Free CSS Templates
CSSFILL.COM - Free CSS layouts and templates: Photo Blog has a number of ready-made css templates, free for use with credit back to the site.
Any order 3 column css layout
A look at making a 3 column CSS layout with the columns ordered in any way, so that the content can come first in the source, for example.
Understanding “Any order columns” | Bite Size Standards
Rock Solid CSS Layouts
Rock Solid CSS Layouts [CSS Tutorials] - an excerpted chapter from a CSS book, this chapter walks through how to create a solid, two-column CSS layout.
Yet Another Multicolumn Layout
Yet Another Multicolumn Layout | Home - the site is in German but CSS is a universal language.
How to builder dynamic-width pages now
Digital Web Magazine - How to build dynamic-width pages now - a walk through on how to make CSS layout that will adjust for a users screen size.
CSS/XHTML Templates
Mollio CSS/XHTML Templates - one, two, three-column layouts, with left or right nav and a styleguide. And they validate (yes, I checked!).
Layout Gala
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! - I love it when titles leave nothing more to add.
CSS Drop Column Layout
CSS Drop Column Layout | Muffin Research Labs - another approach to dynamic layout width. This one is done with only CSS.
Width Based Layout
CollyLogic: Redesign Notes 1: Width-based layout - redesign notes, outlining how to set-up a width based layout that dynamically will add a 3rd column, depending on the viewers browser window size.
Wicked Worn and Bullet Proof Liquid
Wicked Worn Bulletproof Liquid - a marriage of two great ideas!
Resolution Dependent Layout Updated
The Man in Blue > Resolution dependent layout update.
Div thinking cap
Veerle's blog - Comments - another excellent write-up from Veerle's blog, this time taking a look at looking at page layouts with css div containers.
In Search of One True Layout
Introduction - In search of the One True Layout
Creating Liquid Faux Columns
Creating Liquid Faux Columns - a worthy bookmark, since liquid seems to be the new black. Again.
And yet another Liquid Faux Column approach.
Yet Another Multicolumn Layout
Yet Another Multicolumn Layout
One clean markup, many layouts
One clean HTML markup, many layouts...
Liquid Designs
Liquid design is 'back'. Here's a site that highlights some of the best implementations as well as offering up some resources to help in designing a liquid layout. - Liquid Designs
CSS Based layout start to finish
design in-flight: Soup to Nuts: Making a CSS-based layout start to finish - great step-by-step description on how to produce compliant css/xhtml layouts.
Template:CSS
Template:css, a searchable repository of css based layouts . Handy resource. There is an option to add your own layout into the search engine as well.
Spooky Girlfriend
Spooky Girlfriend ::: The Standards compliant, table-less Xhtml and Css code generator. Great name! From the same site that brought the simple, clean rollover menus.
Lotsa Layouts
Quick and easy CSS layouts - RuthsarianLayouts, CSS Creator and the CSS Page Maker.
3-column CSS layout
Interesting 3 column CSS layout, which apparently works cross-browser (recent browsers, anyway). And another 3-column layout, inspired by this one.
[Link found throug Web Graphics]
Subscribe
Subscribe RSS
Subscribe by Email
Categories
- Blogging
- Color Tools
- CSS Layouts
- CSS Navigation
- CSS Resources
- CSS Snippets
- Del.icio.us
- Design Elements
- Design Resources
- Digital Photography
- End of the Day Digests
- Everything Else
- Firefox
- Flickr
- Photoshop
- RSS
- Scripts and Software
- SEO and Marketing
- Tools and Generators
- Web Design
- Web Development
- Windows and Computing
Search etc.
About
Browse the Archives »