Home arrow HTML arrow Page 2 - 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 - Treating block-level elements as inline-ones with the inline-block value
(Page 2 of 2 )

To be frank, the use of the “inline-block” value is amazingly simple. If you had the chance to work with the “display” property (something that I assume is true), the process is similar to utilizing the “inline” or “block” values individually.

Logically, the best way to understand the functionality of “inline-block” is by using it with the sample divs coded previously. Thus, take a peek at the following code bit, which will render the elements next to each other without having to struggle with CSS floats:

/* inline-block elements */
.section {
    display: inline-block;
    width: 200px;
    padding: 20px;
    background-color: #eee;
    /* Hack for IE 7 */
    zoom: 1;
    *display: inline;
}

As I just said, creating “inline-block” HTML elements is an extremely simple process that doesn’t differ too much from using the “display” property in a standard fashion. In this case, once the “inline-block” value has been given to the target divs, they’ve been styled as regular block-level containers, which makes it possible to assign a width, padding and the like.

Quite possibly, the most difficult facet of the entire styling process is the ugly hack for IE 7. This makes the browser trigger its “hasLayout” property, so that it can treat the target elements as block-level ones. Not a very elegant workaround, indeed, but it achieves the desired behavior.

So far, so good. At this point, I’m sure that you've grasped the underlying logic of the “inline-block” value. The next logical step is to add the CSS styles just defined to the (X)HTML document containing the target divs.

This will be done in the coming segment. So, jump ahead and read the next few lines.

Attaching the previous CSS styles to the target web page

If you’re anything like me, then you want to see if the CSS styles defined before are really as functional as they seem in theory. Well, don’t get concerned, as below I attached the pertinent styles to the previous (X)HTML document, so that you can test it and see the output that it produces. Here it is:

<!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>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #666; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
/* inline-block elements */
.section {
    display: inline-block;
    width: 200px;
    padding: 20px;
    background-color: #eee;
    /* Hack for IE 7 */
    zoom: 1;
    *display: inline;
}
</style>
</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>

There you have. If at this point, you test the above web page using your own browser (including IE7+) the target divs should be displayed next to each other in the same line, similar to the result depicted by the following image:

That worked pretty smoothly, indeed. Even though the example is quite simplistic, it's handy for showing how easy it is to use the “inline-block” value in the construction of standards-compliant web page layouts, without having to appeal to the functionality of floated elements.

Quite possibly, the major pitfall with this approach is that most of the time the white space within the markup of the target elements must be removed, to avoid an annoying gap of 4px that most browsers will generate to the right of the elements in question. Despite this issue, the “inline-block” value is a great way to get rid of CSS floats (even though there are other approaches that might be slightly more appealing). So, go ahead and give it a try. You’ll be pleased with the results that you’ll get, trust me.   

Final thoughts

In this first part of a two-part tutorial, I created an approachable example which showed how to use the “inline-block” value taken by the “display” CSS property to create a basic web page layout without the complexities and twists of CSS floats. As you just saw, the implementation of this approach is indeed straightforward, meaning that you shouldn’t experience major inconveniences replicating it when building your own designs.

Moreover, the aforementioned example demonstrated how to employ this method with a few divs, which was hopefully a quite instructive experience. However, the same concept can be applied to any other block-level element, with similar results. In line with this idea, in the last installment I’ll be teaching you how to utilize the “inline-block” value with the items of an unordered list.

Don’t miss the last part! 


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