CSS3 columns layout without Floats and clears

Hi Guys,

The new sun is shinning above major browsers and I guess it will shine soon on IE as well.

What I am going to share today is the way CSS is coming to our help in columnizing without needing floats and clears All done by CSS engine.

Now you still can’t use it in production because of the lack of support in some browsers, see the browser support section in this post.

Up until now we have used many frameworks that comes with Grid systems, table layouts. But we all learn, adapt to whats available.

For the CSS styles I am going to discuss/show in my post it will be adapted say in coming months. No way this is a replacement to grid styles that we get from different framework because lot of work still need to be done by us. But these style provide cleanliness and simplicity in approach.

Here are some CSS styles that I will be touching

  1. column-count
    This property set the number of desired columns
  2. column-gap
    This is like cell spacing for me that we’ve been using for ages with HTML Tables
  3. column-width
    defines the base value for the columns width. default is auto and is calculated by browsers
  4. column-rule-width
    for me this is like a splitter. A line between two columns
  5. column-rule-style
    can be one of these none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
  6. column-rule-color
    can be a HEX or rgb color value.
  7. column-span
    I think this will generally be used for heading.

 

All right so now that we know what properties we are going to discuss let consider the text below for bases of my examples.

[geshi lang=”html5″ nums=”1″ target=”_self” ]

I’ve already given class names in above markup elements.

Now that we are ready lets create 3 columns with CSS shown below

[geshi lang=”css” nums=”1″ target=”_self” ]

 

 

Result

http://jaspreetchahal.org/examples/css-examples/css-column-count.html

Now lets add column-rule-style,  column-gap, and column-rule-width

The CSS will look like this now

[geshi lang=”css” nums=”1″ target=”_self” ]

Result

http://jaspreetchahal.org/examples/css-examples/css-column-count-gap.html

 

Lets now add column-rule-color, and utilize column-span properties

To make it more sense I will add a following markup

[geshi lang=”html5″ nums=”1″ target=”_self” ]

The CSS will look like this

[geshi lang=”css” nums=”1″ target=”_self” ]

Result

http://jaspreetchahal.org/examples/css-examples/css-column-count-gap-color.html

 

You can play more with the styles that I showed you above. I guess this will be the future for basic column layouts.

Browser Support

Currently no support is there in IE series as CSS columns are still I guess in experimental stages.

All other major browsers Webkit browsers (safari and chrome), Mozilla, Opera all support them

I hope that this helps you in some way.

At the moment I don’t see it in production until you are ready for fallbacks for IE. But its good to know thing. IE10 I am sure will support these.

Cheers,

Advertisement

 

 

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.