Home arrow HTML arrow Page 2 - 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 - Introducing the Gap Option
(Page 2 of 2 )

As I explained in the preceding segment, the “column” property makes it really simple to add padding (or gutters, to say it more elegantly) to the rendered columns by means of an extra option called “gap.”

If you’re wondering how to use this option, check the improved version of the previous example below. It now displays the pertinent columns with an extra white space of 20px between them:

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Using the 'column' CSS3 property (using gaps)</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 {
    column-width: 200px;
    column-count: 3;
    column-gap: 20px;
   
    -moz-column-width: 200px;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
   
    -webkit-column-width: 200px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}
</style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>Using the 'column' CSS3 property (using gaps)</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>

As you can see above, using the “gap” option is a breeze. It simply acts like a sort of padding for the content wrapped inside the columns. If you want to see how the columns look after adding this extra white space to them, the following screen capture should be quite illustrative:

That looks much better, right? This shows that the “column” property includes some great features that allow you to create cleaner and more readable layouts in a few easy steps. But, before you start playing with the earlier web page, let me tell you that “gap” isn’t the only option that “column” offers. The property supports another argument, called “rule,” which lets you add fancy borders to the rendered columns.

With that said, in the next section I’ll be creating a final example. It will demonstrate how to use this additional argument with the same sample web page that you saw before.

Introducing the “rule” Option

Similar to its partner “gap,” the use of the “rule” option is easy to understand. Essentially, the option allows you to decorate the corresponding columns with stylish borders, which naturally can be customized at will.

For you to understand how to put the “rule” argument into action, below I coded a revamped version of the previous web page. It now uses the argument to improve the appearance of the target columns even further. Take a look at it:

<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Using the 'column' CSS3 property (using gaps and rules)</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 {
    column-width: 200px;
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid #ACACAC;
   
    -moz-column-width: 200px;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #ACACAC;
   
    -webkit-column-width: 200px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #ACACAC;
}
</style>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1>Using the 'column' CSS3 property (using gaps and rules)</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>

While at first glance, the use of the “rule” option is identical to its counterpart “border,” this is only partially true. In reality, the option permits you to specify the color and type of borders (solid, dashed, etc.) that will be added to the columns. In this case, however, the borders will behave sort of like nifty separators, as depicted in the following image:   
  

Not bad at all, right? As you can see, the “rule” argument lets you boost the core functionality provided by the “column” property. It can be easily tweaked, too. So, if you feel adventurous and want to put your creative skills to work, feel free to play around with this option and start creating all sorts of engaging web page columns. You’ll have a great time doing it, believe me.

Final Thoughts

In this two-part tutorial, I provided you with a quick introduction to using the “column” CSS3 property, which allows you to create sibling web page columns in a snap, without having to deal with the burdens and oddities of CSS floats.

While the functionality of “column” is indeed quite remarkable, it doesn’t enjoy greater popularity because of the lack of support by Internet Explorer.

This shouldn’t stop you, though, from being bold and using it right now on your web pages. In such a case, a JavaScript library like Modernizr (http://www.modernizr.com/) can be a good ally that will let you utilize the property in a conditional fashion.

See you in the next web design tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials