At dynamIt we dropped HTML tables as a layout device long ago. It has been all CSS ever since. CSS for layout is really the way to go. It’s light, it’s flexible, it separates design from content making your site extensible.

I’ve written markup (XHTML/CSS) for dozens of sites now. And, as we build more and more sites my CSS style continues to evolve, or mature, if you will. But, CSS is a interesting topic, no matter how routine you think it is, there are always new tricks to discover.

I recently found a new one that I am pretty excited about. Certain elements have a block display meaning they appear with a line break before and after them (that is to say on a page they stack vertically one on top of another). Meanwhile, other elements display inline, meaning they appear within a line much like single letters within a sentence. Inline elements are great because they can appear next to each other and wrap to the next line, but they have certain drawbacks. For example, you cannot set a definite width or height for inline elements, nor can you give them margins.

But, I came across a different type of display. It is called inline-block. Just as you can imagine, it is the best of both worlds. Items will display as inline elements, but certain block properties are available to them. I jumped on to Google to learn more and found a very nice article on the topic at SitePoint.

I quickly noticed that there are two things (one good, one bad) that this article does not address.

First, the bad news, it is rather broken in Mozilla FireFox 2.x. If you have text in the -moz-inline-box <div> that is longer than the width of the <div> (something that is, by the way, a very common occurrence), it fails to wrap and spills outside the box. Luckily, the solution is quite simple. Just add a <div> with display: block and same width on the inside. The block-level div forces the text to wrap properly.

Second, the vertical-align CSS property actually works! Give the series of <div>’s set to inline-block a vertical alignment and they actually behave as you’d expect.

For all of you developers out these that think this sounds interesting, check out this quick example:


<style type="text/css">
.holder {
text-align: center;
width: 500px;
border: 2px solid #1C659C;
}
.category {
display: -moz-inline-box;
display: inline-block;
width: 90px;
margin: 5px;
border: 1px dotted #666666;
vertical-align: middle;
}
.category div {
width: 90px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.category {
display: inline;
}
</style>
<![endif]-->

<div class="holder">
<div class="category"><div>The quick brown fox</div></div>
<div class="category"><div>jumps over</div></div>
<div class="category"><div>the lazy dog</div></div>
</div>


This should produce the following output:

Dynamit was honored as one of the “Best Places to Work” in 2010 & 2011 by Columbus Business First newspaper and Interactive Agency of the Year. Times are even better in 2012 and we’re hiring a Web/Graphic Designer for our aggressively growing team.

This is an exciting opportunity to work on cutting edge projects for well-known brands in a dynamic, entrepreneurial and highly creative environment. Please email resumes/cover letters and portfolio information (documents or links to online examples) to Gary Moneysmith via gmoney@dynamit.us.

A web/graphic designer on the Dynamit team will:

• Be well versed with Adobe Creative Suite: Strong knowledge of Photoshop, experience with Illustrator and InDesign.
• Have a strong understanding of Usability & Web Trends: Experience with user interface design, knowledge of best practices & examples of this in a portfolio or live site/application design. They will also be up-to-date on web trends and design tactics with examples.
• Have experience in user experience design (UXD) designing application and system interfaces. This experience is crucial for this position.
• Have Basic Programming Knowledge: We’re not looking for a developer here, but the designer should have the ability to design for web with a knowledge of the boundaries and how to design for execution by a programmer.
• Have a Strong Portfolio: We’d like to see much more web work than print.
• Be eager to learn, with a passion for design & the web. The designer should have a strong internal drive for industry knowledge and be committed to furthering the craft.

Experience is important, but personality is key. Our culture is what drives us, and we’re looking to build our team with someone who both fits and contributes to it.

The position is full time at our office in the Arena District in Columbus, Ohio. We offer a competitive salary and benefits package as well as a fun, high-energy, intellectually-stimulating work environment.

Benefits Include

• Competitive salary (compensation will be based on skills and experience)
• Fully paid medical/dental insurance for employees
• Paid parking
• Unlimited vacation time (within reason)
• Office bar + climbing wall — not recommended together

Don’t sit back. If you want to work in a fast paced work environment with great people who love what they do, apply today.

About Dynamit
Dynamit is a digital agency based in the Arena District in Columbus, Ohio. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce. Client work includes Hilton Worldwide, Charley's Grilled Subs, McGraw-Hill, British Broadcasting Corporation (BBC), E-Z-GO, American Electric Power (AEP), Columbus College of Art & Design and the Ohio State Medical Center (OSUMC) to name but a few.