CSS3 two column layout

admin » 23 April 2009 » In Css Articles »

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

It looks promosing with the new CSS3, many new features is on it’s way. Today, we took a look on how to make a 2 column list layout, using CSS3 properties.
The result, viewed in Firefox 3:

css3-two-column-layout

As you can see, the column is split in 2. This is done by using the following css code:

^?View Code CSS

body {
font-size: 62.5%; 
padding: 30px;
}
 
ol {
font: 1.2em/1.5em Verdana, Arial, sans-serif;
margin-bottom: 1.5em;
}
 
.twoColumnList {
width: 40em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-moz-column-count: 2;
-moz-column-gap: 1em;
}

A width is defined and the column-count and column-gap properties automatically split up the space and position the list elements. Note that the prefixes -webkit- and -moz- are used here. In the long run, these will be dropped, but for now, they are required to make these properties work in Firefox, Safari and Google Chrome.

The html code is pretty straight forward:

^?View Code HTML4STRICT

<body>
<h1>Testing two column list layout with CSS3</h1>
  <ol class="twoColumnList">
    <li>Testing CSS3</li>
    <li>Looks like Firefox has the best support</li>
    <li>Chrome is also good</li>
    <li>IE, well...it's still IE</li>
    <li>Venenatis</li>
    <li>Nam magna enim</li>
    <li>Accumsan eu</li>
    <li>Blandit sed</li>
    <li>Blandit a eros</li>
    <li>Quisque facilisis</li>
    <li>Try it out yourself</li>
  </ol>
  <p>Check out more stuff on <a href="http://www.csstemplatesweb.com" title="Csstemplatesweb">Csstemplatesweb.com</a></p>
</body>