Multi-column layout

The CSS3 function for Multi-Column Layout allows the user to creating a design similar to a Newspaper layout. With designs of blogs and websites heading towards a magazine layout type of style I figured this is truly a helpful style to use.

Multi-column Layout Properties

column-count: 3;  this sets the number of columns for which the content will flow.
column-width: 1em; this property sets the width of each column.
column-rule: 1px solid black; this sets a border between the columns.

Code sample:

DIV {
width: 200px;
column-count: 2;
column-width: 100px;
column-gap: 10px
column-rule: 1px solid black;
}

Now if you want to have something span across the columns that can be easily down with the column span property.

Multi-column Span Property:

column-span: all; This allows objects (text/images/etc) to display through multiple columns.

After going through a few projects and picking up some css skills along the way here are some neat css tricks I’ve learned and found very helpful.  So helpful I figured I write somewhere so I can always find what I need instead of using google all the time. The first bit of code is setting transparency for objects like images and divs. it can be a nice effect for  setting transparent backgrounds behind some funky bg image.

Codes for setting transparency:

For current firefox, safari browser
opacity:0.7;

For firefox browser
-moz-opacity:1.0;

For ie browser
filter: alpha(opacity=100);

Now here is something I’m completely stoked about and that is rounded corners.  I’m not sure about you but  I’ve always hated cutting out rounded corner images out just to make rounded corners(my blood is boiling just thinking of it).  Luckily the code below help eliminate most of these issues below are the code to create  rounded corners for safari and mozilla.  As for ie I don’t believe they support it yet but if you know they do please let me know ;D

Code for making rounded corners:

For Safari browser:

this code sets all the corners
-webkit-border-radius: 10px;

This set of code allows the user to specify which corner the user wants to be round.
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-radius:10px;
-webkit-border-bottom-radius:10px;

For mozilla firefox browser:
-moz-border-radius:10px;

This set of code allows the user to specify which corner the user wants to be round.
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

ie currently doesn’t support rounded corners