Home arrow HTML arrow Intro to Inline-block HTML Elements with CSS
HTML

Intro to Inline-block HTML Elements with CSS


In this first part of a two-part tutorial, you'll learn how to use the “inline-block” value taken by the “display” CSS property to create a basic web page layout -- without having to deal with the complexities and twists of CSS floats. Best of all, implementing this approach is quite straightforward.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
October 05, 2011
TABLE OF CONTENTS:
  1. · Intro to Inline-block HTML Elements with CSS
  2. · Treating block-level elements as inline-ones with the inline-block value

print this article
SEARCH DEVARTICLES

Intro to Inline-block HTML Elements with CSS
(Page 1 of 2 )

A lot of water has passed under the bridge since the old days of website design, when every HTML page layout was created by using a bunch of tables. Aside from learning that mixing structure, visual presentation and behavior all in a single document was an evil thing that should be avoided by all means, most of us realized that tables should be used only for displaying tabular data, and that layouts should be built up upon the foundations of more generic elements, like the venerable divs.

From that turning point onward, it's become "trendy" to implement div-based layouts, even though such implementation comes with some notorious and well-known issues, such as the so-called “divitis.” Unfortunately, creating web page layouts with divs comes with a hidden and annoying cost: yes, being intrinsically block-level elements, positioning divs (even in relatively simple use cases) often requires the utilization of CSS floats. And you know that CSS floats are hard-to-tame creatures that can cause headaches even to the most experienced designer.

The good news is that there exists an underrated approach that permits you to take advantage of the functionality provided by divs, or any other block-level element, without having to deal with the annoyances of CSS floats. If you’re wondering what’s so mysterious about  this approach, you’ll feel rather disappointed, as the help comes from an old contender: the “display” property. Effectively, if the property is given the value “inline-block,” it will render an element as if it were an in-line one, but at the same time preserving its block model. This makes it possible to assign to the element a width, a height and so forth. That sounds pretty interesting, doesn’t it?

What’s more, the value “inline-block” is currently supported by most modern browsers (including IE 7, even though with some caveats), meaning that you can start using it confidently for creating your own web page layouts without having to deal with the somewhat tricky behavior of CSS floats. Having said that, in this two-part tutorial, I’ll be creating some examples that will show you how to put this approach to work in a couple of concrete use cases.

Ready to dig deeper into the terrain of CSS float-free web page layout creation? Then begin reading!  

Getting started: building a simple (X)HTML document

The first example that I plan to create here to demonstrate the actual functionality of the “inline-block” value will make use of three sample divs as the target elements. Needless to say, the elements must first be included in a testing (X)HTML document, so below I defined a trivial one. It has the following structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using the 'inline-block' value with the 'display' CSS property</title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <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.</p>
        <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.</p>
    </div>
    <div id="main">
        <div class="section">
           <h2>Section 1</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.</p>
        </div>
        <div class="section">
           <h2>Section 2</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.</p>
        </div>
        <div class="section">
           <h2>Section 3</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.</p>
        </div>
    </div>
    <div id="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.</p>
         <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.</p>
    </div>
</div>
</body>
</html>

As you can see above, the previous web page defines the classic “header,” “main” and “footer” sections that can be found in nearly every (X)HTML document today. Admittedly, this structure offers nothing especially interesting or hard to grasp at all.

However, you should pay attention to the three divs that have been assigned a CSS class called “section.” If, eventually, they were rendered next to each other, the most common way to achieve this would be simply by floating them, either to the left or to the right of the document. But, as was noted in the introduction, it’s also possible to treat them as inline elements, while at the same time preserving their “block” nature.

Naturally, this is exactly the behavior produced when assigning the value “inline-block” to the “display” property. Thus, in the coming section you’ll see how easy it is to position the earlier divs in the same line via the pertinent value. 

To learn more about this styling process, click on the link 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