Web Design

22 CSS Layout Tutorials and Tricks

CSS is the style guide for all websites, it tells the browser what the page should look like. Today I share with you 22 resources to help you with your CSS layouts. These tutorials and tricks range from liquid columns to adaptable view design concepts. Enjoy and if you have a link to share feel free!

Multiple CSS Backgrounds and Gradients
Great article about how to use multiple background and gradients using nothing but CSS.

Sexy CSS Tool Tips
A nice sample of how tool tips can help your user experience and pack more information into your design.

Correcting Orphans with Overflow
A few tutorials that demonstrate how to clear up some common issues using the overflow property.

Facebook Style Footer
Learn how to re-create the Facebook admin footer for your website.

Adaptable View
This tutorial explains how to allow users to make manual adjustments to the look of your site.

Easy Layout Switch with CSS and jQuery
Simple way to switch layouts.

Resizing Images Based On Browser Window Size
Changing fluid width with CSS is simple, but images do not function the same way. Us this technique to re-size them based on the browser window size.

CSS 100% Height
A simple technique for creating a div table that stretches the full height of a browser.

CSS3 Drop-Down Menu
A clean, simple a nice navigation menu.

Fluid Images
Another tutorial on how to make the images you use on your site fluid.

Scroll/Follow Sidebar
A site sidebar the follows you as you scroll down the page. Simple concept using CSS and JQuery.

Vertical Centering With CSS
Good article on vertical centering using just css.

Create YouTube-like adaptable view using CSS and jQuery
Adaptable view YouTube style.

How To Create a Horizontally Scrolling Site
One of the latest trends we have seen is to create a site that scrolls horizontally. Very cool tips on how to get this done.

Create Sidebars of Equal Height with Faux Columns
Having issues with your columns not being the same height due to lack of content. Don’t let it get the best of you. Check out this method to code your site!

Quick Tip: Centered Fake Floats
Cool way to center items without using floats!

6 Flexible jQuery Plugins to Control Web Page Layouts Easily
Six jQuery plug-ins to manage your page layouts easily.

Four Methods to Create Equal-Height Columns
Create three equal height columns that work in all major browsers.

CSS Large Background
Various techniques for using CSS to use a large background on your sites.

A Nice Little CSS Positioning Technique
A basic unordered list, with left-floated images where the text doesn’t wrap under the images. Very cool if you are looking for a unique look to your content.

Perfect Full Page Background Image
Fill your background, no whitespace, with a large background image.

Smart Columns With CSS and jQuery
A great article about the use of fixed and liquid columns with CSS and jQuery.

4 replies on “22 CSS Layout Tutorials and Tricks”

Leave a Reply