Tip Details Add a Related Tip

Rate as: Positive Negative

CSS trick for doing unlimited number of columns on a page without using tables

This site provides a cool idea on how to do multiple column layouts using purely CSS, no tables involved. They claim that it can be used to create an unlimited number, and they show four columns.

Basically, what they are doing is creating divs that are absolutely positioned. Then, instead of trying to float the divs, they set the 'left' and 'width' parameters as percentages. As you move to the right across the screen, the 'left' parameter for the next column is the 'left' value from the previous column, plus the 'width' from the previous column, as well as any margin that you want between the two columns.

This is actually a pretty cool idea since it avoids floating the divs (which always seems to mess me up). You could even put all of these divs inside another wrapping div to ensure that they line up vertically.
Link: glish.com...Search for more tips related to this link
Rating: 100% positive, 2 total Votes
Categories: CSS web 2.0 web design
Added: on Mar 19, 2007 at 7:45 pm
Added By: messy-me

Comments on this Tip

Add a Comment
There are no comments for this tip
Your Comment:
(how to format)
Rate This Tip:

Verify Humanity:
Sorry, we know it's annoying, but please enter the characters shown in the image to the left so that we know you're an actual person and not an evil spammer. Thanks.
       

Related Tips

Use a javascript lightbox to display pictures

100% positive, 0 comments
– Tip added by an anonymous user on Nov 19, 2007 at 5:45 pm

CSS Text tricks

Categories: CSS web 2.0 web design
100% positive, 0 comments
– Tip added by an anonymous user on Jun 16, 2007 at 2:46 pm

Cool accordian menus in CSS/Javascript

0% positive, 0 comments
– Tip added by an anonymous user on May 30, 2007 at 9:19 pm

library of sites designed with CSS

no ratings, 0 comments
– Tip added by Marcos84 on Mar 13, 2007 at 12:20 pm

Create a Mac-like dock on web pages

100% positive, 0 comments
– Tip added by Marcos84 on Jul 13, 2007 at 11:39 am

Sexy buttons using CSS

Categories: design web 2.0 CSS
100% positive, 0 comments
– Tip added by an anonymous user on Aug 31, 2007 at 1:37 pm

Smooth scrolling for anchor links

100% positive, 1 comment - last added on Mar 12, 2007 at 9:09 am
– Tip added by Marcos84 on Mar 11, 2007 at 9:24 am

great site with tips on designing to web standards

100% positive, 0 comments
– Tip added by rlansky on Mar 06, 2007 at 10:20 am

web 2.0 logo library

Categories: web 2.0 web design logos
100% positive, 1 comment - last added on Apr 10, 2007 at 5:57 pm
– Tip added by rlansky on Apr 05, 2007 at 12:24 pm

Web developer tools for Firefox

100% positive, 0 comments
– Tip added by rlansky on Mar 28, 2007 at 11:39 am

CSS drop shadow without images

Categories: CSS web design
no ratings, 0 comments
– Tip added by an anonymous user on Jan 02, 2008 at 8:16 am

CSS Menu Navigation

Categories: CSS web design coding
no ratings, 0 comments
– Tip added by messy-me on Sep 05, 2007 at 6:09 am

Preview of CSS3

Categories: CSS web design
no ratings, 0 comments
– Tip added by an anonymous user on Jul 03, 2007 at 9:28 pm

Answers to your CSS questions

Categories: CSS web design
no ratings, 0 comments
– Tip added by an anonymous user on Jun 20, 2007 at 8:48 am

Web 2.0 buttons

no ratings, 0 comments
– Tip added by an anonymous user on Jun 04, 2007 at 7:26 am

Styling browse buttons on file elements in forms

Categories: CSS web 2.0 javascript HTML
no ratings, 0 comments
– Tip added by an anonymous user on May 31, 2007 at 9:13 am

Using CSS floats

Categories: CSS programming web 2.0
no ratings, 0 comments
– Tip added by Marcos84 on May 02, 2007 at 4:48 pm

Cool cutting-edge CSS demos

Categories: CSS coding web web 2.0
no ratings, 1 comment - last added on Mar 08, 2007 at 8:17 pm
– Tip added by Marcos84 on Mar 08, 2007 at 3:27 pm

E-Commerce Web Site Development, London, UK

no ratings, 0 comments
– Tip added by obsgroup on Jun 12, 2008 at 5:15 am

Why Should You Outsource?

no ratings, 0 comments
– Tip added by an anonymous user on Jun 08, 2008 at 1:35 pm