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; |
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. |
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;} |
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; |
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; |
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; |
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"><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="James White" /> <title>Multi Column Module CSS3 |
No comments:
Post a Comment