Home arrow HTML arrow More Web Columns with CSS3 and HTML
HTML

More Web Columns with CSS3 and HTML


If you still think that you need to wrestle with CSS floats to create sibling columns on web pages, I have good news for you. Among the new properties introduced with CSS3 is "columns," which will permit you to perform this process is a straightforward and truly painless fashion.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
November 03, 2011
TABLE OF CONTENTS:
  1. · More Web Columns with CSS3 and HTML
  2. · Introducing the Gap Option

print this article
SEARCH DEVARTICLES

More Web Columns with CSS3 and HTML
(Page 1 of 2 )

"Column," a rather overlooked, yet powerful CSS3 property, does exactly what its name suggests. It will let you easily break the content of any block-level container into multiple columns, without making you deal with the annoyances and pitfalls of floated elements. What else can you ask for?

To demonstrate how simple it is to put the “column” property into action, in the first part of this tutorial, I developed a couple of examples. They showed how to use the pertinent property to create both two-column and three-column layouts. In both cases, the entire design process was as simple as specifying the number of columns required to span the content, and then assigning the width (in pixels, ems and so forth) to the columns.

It’s valid to note, though, that “column” comes with some additional features that you’ll find pretty engaging as well. These include the ability to add customizable gutters and rules to the rendered columns. So if you’re interested in learning how to work with these extra facilities, in this last installment of the tutorial I’ll be building a few more hands-on examples to get you on the right path.

Now, it’s time to continue exploring the functionality offered by the “column” property. Let’s go!

Using the “column” Property To Create a Basic Web Page Layout

If you missed the previous part of this tutorial, where I introduced the “column” property, don't worry. In the lines below I listed one of the examples developed in that part. It shows how to create a three-column web page layout by taking advantage of the property’s functionality.

Here’s the introductory example:

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Using the 'column' CSS3 property (rendering 3 columns)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
#wrapper {
    width: 800px;
    margin: 0 auto;
}
#main {
    -moz-column-width: 200px;
    -webkit-column-width: 200px;
    column-width: 200px;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
</style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>Using the 'column' CSS3 property (rendering 3 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>Center 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>

From the above code sample, it’s clear to see that using the “column” property is a simple process. In this case, I decided to use the the property to split the content of a generic web page section, identified as “main,” into three different sibling columns. As I said at the start, the process only required us to specify the number of columns, along with the width (in pixels) assigned to each of them. This was a breeze to accomplish. 

If you try out the previous web page using Firefox, Chrome or Safari, (Internet Explorer doesn’t support CSS3 columns, of course), you should get an output similar to this one: 

There you have it. The “column” property yields quite impressive results. But, is it just me, or does the content placed inside the columns look somewhat cluttered? Well, this is a rhetorical question; the white space between columns is a bit small, which makes them hard to read and rather unprofessional.

But fear not; the property allows us to fix this issue very easily. It supports an additional argument, called “gap,” which lets you control and alter the padding that exists between the rendered columns.

As usual, the best way to grasp how to use the “gap” facility is by example. So, in the next segment I’ll be amending the previous web page. This time, we'll add some extra white space to the corresponding columns via this argument.

To see how this will be done, click on the link that appears below and keep reading.


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