Home arrow HTML arrow Columns with CSS3 and HTML
HTML

Columns with CSS3 and HTML


In this first part of a two-part tutorial, I develop a couple of examples that show how easy it is to work with the “column” CSS property. It allows you to create grid-based web page layouts like the ones you can find in any printed magazine.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 02, 2011
TABLE OF CONTENTS:
  1. · Columns with CSS3 and HTML
  2. · Using the column CSS3 Property

print this article
SEARCH DEVARTICLES

Columns with CSS3 and HTML
(Page 1 of 2 )

It isn't breaking news that CSS3 comes with properties that have generated a lot of hype in the last few months. Now it’s possible to add native shadows to text and boxes, and even decorate HTML elements with nifty rounded corners, all without creating a single background image or dealing with the burdens and complexities of JavaScript.

However, looking into the coffer of CSS3 is pretty much like diving into the deep waters of the ocean: you never know what new, unexpected treasure is about to come to the surface. The standard includes some additional, rather underrated properties, with some very interesting capabilities. Enter the “column” property, a handy feature that allows you to create web page columns in a jiffy -- without using CSS floats, which are always tricky and hard to tame. 

While "column" isn't as popular as “text-shadow,” “box-shadow” and “border-radius,” it is still a powerful property. As such, it deserves a close analysis from a practical standpoint.

With that said, in the next few lines I’ll be creating some comprehensive, fully-customizable examples, which should help you start using the “column” property in the construction of your own web page layouts.

Ready to learn how to add some magazine-like columns to your (X)HTML documents in some easy steps? Then begin reading!
        
Defining a Basic Web Page

Since my goal is to demonstrate the  functionality offered by the “column” property, the first step is to create a sample web page that allows us to put the property to work.

Below I defined a basic HTML5 document, whose structure looks like this:

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Using the 'column' CSS3 property (rendering 2 columns)</title></head>
<body>
    <div id="wrapper">
        <header>
            <h1>Using the 'column' CSS3 property (rendering 2 columns)</h1>
            <h2>Header section</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
        </header>
        <section id="main">
            <h2>Left column</h2>      
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
            <h2>Right column</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
        </section>
        <footer>
            <h2>Footer section</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
        </footer>
    </div>
</body>
</html>

To be honest, there’s not much that can be said about the above HTML5 document. It defines three primary sections, including one identified as “main,” which acts like a wrapper for two subsections composed of a couple of H2 elements and some paragraphs.

In addition, you should notice that the subsections haven’t been wrapped inside of any generic container. This makes it quite difficult to split them up into different columns that must be rendered next to each other. So, how can this be done without using some extra markup or appealing to CSS floats?

This, of course, is exactly where the “column” property comes into play! As I said at the beginning, the property makes this a simple process. The best way to demonstrate this is by example, so in the coming section I’ll be showing how to use the property to convert the previous web page into a nice two-column layout.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials