Tuesday, October 25, 2011

Multi Columned Layouts in CSS3


css logo
It’s been a while since my last CSS3 post/tutorial but that doesn’t mean I haven’t been following the development of CSS3. I have been looking at some of the newer features that have recently been implemented and one that’s caught my eye is the multi column layout module. You can already guess what this module can do. Thats right it creates columns! Using the new column module it allows you to create columns in the form of a newspaper style column. News websites and blogs rejoice! Lets take a look at how we can create columns with the new module.

It may seem quite weird at first but really, this is a interesting implementation to CSS3, being able to have content in a column just by using it’s own module is quite useful, it sure beats using divs or lists and then adding a float on them. Which can get quite messy and annoying. But when CSS3 is in full swing, maybe we can remove the need of using floats.

Basics of the Column Module

Now as always there are essentially duplicate attributes applied because as you know Mozilla and Safari have different declarations, so with this being said the multi column module only works in Mozilla FireFox and Safari at the moment.
1
2
3
4
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
This is the basis of the Multi column module. Introducing a totally new setup using column-width, column-gap etc. This is a basic use of the column module, lets start using the module within divs.

Basic Column Layout:

How im creating the example is using the column module within a div called box and then applying both styling and the multi column attributes to the div. Put this in your HTML:
1
2
3
4
5
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a nulla neque, in vestibulum risus. Donec quis odio sapien. Maecenas accumsan hendrerit lacinia. Mauris vel ante pellentesque odio tempus lacinia. In dui nulla, dictum vitae ornare sit amet, fermentum vel nisl. Donec aliquam dui vel velit rutrum id dignissim ante eleifend. Nullam a rhoncus erat. Curabitur quis arcu non ligula auctor venenatis. Sed dui urna, condimentum at egestas in, sagittis at metus. Mauris eget arcu sapien, ac porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.p>
 
<p>Duis ut quam id ligula porttitor tincidunt. Phasellus fermentum aliquet mauris et rhoncus. Fusce pulvinar lobortis fringilla. Aenean bibendum interdum enim, nec fringilla metus bibendum sed. Mauris eleifend ultrices risus, quis varius neque faucibus ac. Quisque imperdiet mi in ante venenatis ultricies. Vestibulum gravida lacus quis neque tincidunt eget mattis ipsum accumsan. Ut condimentum feugiat nibh, vel egestas leo tincidunt nec. Aliquam ipsum massa, consectetur sit amet gravida in, porttitor in lorem. Mauris ultrices pulvinar odio quis semper. Mauris sagittis, mauris id molestie aliquam, sem nunc euismod lectus, at adipiscing mauris mauris ac tellus. Cras vitae nisl eget ligula porta volutpat. Duis nulla nunc, blandit faucibus porttitor eu, adipiscing et quam. p>
div>
Using a similar code above we shall create a basic column layout. The first example uses this code:
01
02
03
04
05
06
07
08
09
10
.box {
background:#eee;
width:500px;
padding:20px;
border:1px solid #DEDEDE;
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-gap: 1em;
 -webkit-column-gap: 1em;
}
This creates columns in this manner:
Example 1
You probably thinking well this looks weird. Well this is because I left out a important attribute that is included in the new module and this column-count. This isn’t applied to the CSS so without it CSS defaults to produces as many columns it can fit in the div it is present in, now lets add in a column count:

Controlling your columsn with column-count

No need to change your HTML just add the additional code into your CSS:
1
2
-moz-column-count:3;
-webkit-column-count:3;
Now our columns should look a bit more managed and now produce three equal columns like this:
Example 2
column-count gives you control over how columns you want your text to be wrapped up in a very easy method of making sure your content is constantly wrapped correctly and is equal.

Gives your columns borders

You can see why this new multi column module is so simple and why it’s probably going to be a big hit when CSS3 rolls out, but maybe you want to add a border to your columns to make them look a bit nicer. The devs at CSS3 HQ have thought of this and added in a attribute in the module for you to do this, can you guess what it is? If you said column-border then your actually wrong, I would of guessed that first too, seems everything follows the logical method of width, gap etc. But no, the actual attribute is column-rule this is simply applied like so:
1
2
-moz-column-rule: 1px solid #DEDEDE;
-webkit-column-rule: 1px solid #DEDEDE;
Apply that to your current CSS and you should get your columns with nice borders:
Example 3
An important note can be mentioned here. Even if you don’t really like the ideas of borders they can be very useful to help you space out your columns. Before I’d applied a border to the columns it looked like the columns spacing was fine. Well now that we’ve added the border I can now see that they need more spacing. So you could use borders to double check spacing.
To fix the problem I simply added in a tiny bit more spacing to the column-gap:
1
2
-moz-column-gap: 3em;
-webkit-column-gap: 3em;
Now the columns spacing looks much more neater:
Example 4
Remember, changing the gap between columns will modify the height of your columns, so if you are defining a certain height in your CSS you will also need to change this accordingly.

Why em units?

You’ll notice throughtout the tutorial to create spacing and width the unit em has been used. This doesn’t mean that you can only use em. Other units can be used but I tried using the column module with px units and it’s harder to get the columns to be equal, by creating sensible gaps and spacing. I’d recommend you use em all the way through when using a multi column layout.

More examples

There we have it an example of the new multi column layout module. I stuck with one example in the tutorial but you can click the link at the end of the tutorial to view more examples of different column widths and gaps. Here is the source code for the different example I achieved.
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="James White" />
 
    <title>Multi Column Module CSS3title>
 
    <style type="text/css">
 
    body  { font-family: Verdana, Geneva, sans-serif; font-size:11px; }
 
    .box {
        background:#eee;
        width:430px;
        padding:20px;
        border:1px solid #DEDEDE;
        -moz-column-count:3;
        -webkit-column-count:3;
            -moz-column-width: 5em;
                -webkit-column-width: 5em;
                -moz-column-gap: 3em;
                -webkit-column-gap: 3em;
                -moz-column-rule: 1px solid #DEDEDE;
                -webkit-column-rule: 1px solid #DEDEDE;
    }
 
    .box2 {
        background:#eee;
        width:430px;
        padding:20px;
        border:1px solid #DEDEDE;
        -moz-column-count:2;
        -webkit-column-count:2;
            -moz-column-width: 15em;
                -webkit-column-width: 15em;
                -moz-column-gap: 5em;
                -webkit-column-gap: 5em;
                -moz-column-rule: 1px solid #DEDEDE;
                -webkit-column-rule: 1px solid #DEDEDE;
    }
 
    .box3 {
        background:#eee;
        width:600px;
        padding:20px;
        border:1px solid #DEDEDE;
        -moz-column-count:4;
        -webkit-column-count:4;
            -moz-column-width: 5em;
                -webkit-column-width: 5em;
                -moz-column-gap: 5em;
                -webkit-column-gap: 5em;
                -moz-column-rule: 1px solid #DEDEDE;
                -webkit-column-rule: 1px solid #DEDEDE;
    }
 
    .box4 {
        background:#eee;
        width:600px;
        padding:20px;
        border:1px solid #DEDEDE;
        -moz-column-count:3;
        -webkit-column-count:3;
            -moz-column-width: 13em;
                -webkit-column-width: 13em;
                -moz-column-gap: 5em;
                -webkit-column-gap: 5em;
                -moz-column-rule: 1px solid #DEDEDE;
                -webkit-column-rule: 1px solid #DEDEDE;
    }
    style>
 
head>
 
<body>
 
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a nulla neque, in vestibulum risus. Donec quis odio sapien. Maecenas accumsan hendrerit lacinia. Mauris vel ante pellentesque odio tempus lacinia. In dui nulla, dictum vitae ornare sit amet, fermentum vel nisl. Donec aliquam dui vel velit rutrum id dignissim ante eleifend. Nullam a rhoncus erat. Curabitur quis arcu non ligula auctor venenatis. Sed dui urna, condimentum at egestas in, sagittis at metus. Mauris eget arcu sapien, ac porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.p>
 
<p>Duis ut quam id ligula porttitor tincidunt. Phasellus fermentum aliquet mauris et rhoncus. Fusce pulvinar lobortis fringilla. Aenean bibendum interdum enim, nec fringilla metus bibendum sed. Mauris eleifend ultrices risus, quis varius neque faucibus ac. Quisque imperdiet mi in ante venenatis ultricies. Vestibulum gravida lacus quis neque tincidunt eget mattis ipsum accumsan. Ut condimentum feugiat nibh, vel egestas leo tincidunt nec. Aliquam ipsum massa, consectetur sit amet gravida in, porttitor in lorem. Mauris ultrices pulvinar odio quis semper. Mauris sagittis, mauris id molestie aliquam, sem nunc euismod lectus, at adipiscing mauris mauris ac tellus. Cras vitae nisl eget ligula porta volutpat. Duis nulla nunc, blandit faucibus porttitor eu, adipiscing et quam. p>
div>
 
<div class="box2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a nulla neque, in vestibulum risus. Donec quis odio sapien. Maecenas accumsan hendrerit lacinia. Mauris vel ante pellentesque odio tempus lacinia. In dui nulla, dictum vitae ornare sit amet, fermentum vel nisl. Donec aliquam dui vel velit rutrum id dignissim ante eleifend. Nullam a rhoncus erat. Curabitur quis arcu non ligula auctor venenatis. Sed dui urna, condimentum at egestas in, sagittis at metus. Mauris eget arcu sapien, ac porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.p>
 
<p>Duis ut quam id ligula porttitor tincidunt. Phasellus fermentum aliquet mauris et rhoncus. Fusce pulvinar lobortis fringilla. Aenean bibendum interdum enim, nec fringilla metus bibendum sed. Mauris eleifend ultrices risus, quis varius neque faucibus ac. Quisque imperdiet mi in ante venenatis ultricies. Vestibulum gravida lacus quis neque tincidunt eget mattis ipsum accumsan. Ut condimentum feugiat nibh, vel egestas leo tincidunt nec. Aliquam ipsum massa, consectetur sit amet gravida in, porttitor in lorem. Mauris ultrices pulvinar odio quis semper. Mauris sagittis, mauris id molestie aliquam, sem nunc euismod lectus, at adipiscing mauris mauris ac tellus. Cras vitae nisl eget ligula porta volutpat. Duis nulla nunc, blandit faucibus porttitor eu, adipiscing et quam. p>
div>
 
<div class="box3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a nulla neque, in vestibulum risus. Donec quis odio sapien. Maecenas accumsan hendrerit lacinia. Mauris vel ante pellentesque odio tempus lacinia. In dui nulla, dictum vitae ornare sit amet, fermentum vel nisl. Donec aliquam dui vel velit rutrum id dignissim ante eleifend. Nullam a rhoncus erat. Curabitur quis arcu non ligula auctor venenatis. Sed dui urna, condimentum at egestas in, sagittis at metus. Mauris eget arcu sapien, ac porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.p>
 
<p>Duis ut quam id ligula porttitor tincidunt. Phasellus fermentum aliquet mauris et rhoncus. Fusce pulvinar lobortis fringilla. Aenean bibendum interdum enim, nec fringilla metus bibendum sed. Mauris eleifend ultrices risus, quis varius neque faucibus ac. Quisque imperdiet mi in ante venenatis ultricies. Vestibulum gravida lacus quis neque tincidunt eget mattis ipsum accumsan. Ut condimentum feugiat nibh, vel egestas leo tincidunt nec. Aliquam ipsum massa, consectetur sit amet gravida in, porttitor in lorem. Mauris ultrices pulvinar odio quis semper. Mauris sagittis, mauris id molestie aliquam, sem nunc euismod lectus, at adipiscing mauris mauris ac tellus. Cras vitae nisl eget ligula porta volutpat. Duis nulla nunc, blandit faucibus porttitor eu, adipiscing et quam. p>
div>
 
<div class="box4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a nulla neque, in vestibulum risus. Donec quis odio sapien. Maecenas accumsan hendrerit lacinia. Mauris vel ante pellentesque odio tempus lacinia. In dui nulla, dictum vitae ornare sit amet, fermentum vel nisl. Donec aliquam dui vel velit rutrum id dignissim ante eleifend. Nullam a rhoncus erat. Curabitur quis arcu non ligula auctor venenatis. Sed dui urna, condimentum at egestas in, sagittis at metus. Mauris eget arcu sapien, ac porta enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.p>
 
<p>Duis ut quam id ligula porttitor tincidunt. Phasellus fermentum aliquet mauris et rhoncus. Fusce pulvinar lobortis fringilla. Aenean bibendum interdum enim, nec fringilla metus bibendum sed. Mauris eleifend ultrices risus, quis varius neque faucibus ac. Quisque imperdiet mi in ante venenatis ultricies. Vestibulum gravida lacus quis neque tincidunt eget mattis ipsum accumsan. Ut condimentum feugiat nibh, vel egestas leo tincidunt nec. Aliquam ipsum massa, consectetur sit amet gravida in, porttitor in lorem. Mauris ultrices pulvinar odio quis semper. Mauris sagittis, mauris id molestie aliquam, sem nunc euismod lectus, at adipiscing mauris mauris ac tellus. Cras vitae nisl eget ligula porta volutpat. Duis nulla nunc, blandit faucibus porttitor eu, adipiscing et quam. p>
div>
 
body>
html>
Click here to view the example. Remember Mozilla FireFox and Safari are the only browsers that will show the multi column layout.

No comments:

Post a Comment