You just never know what you or the client will need. Just when you thought your completely custom design was spot on and perfectly in line with the designs laid out before you started, a new request can come in that seems innocuous but can set you back days in development if you don’t know how to get around it. We’ve identified one that I thought was worth sharing because it can truly seem so easy until you get in to actually do it, and realize there is some thinking to it.

So what is this problem… well, you see, sometimes when you use a CSS library like Bootstrap to handle your row/column layouts on websites, what you have to work with is the fact that by default, they will always make a row 100% wide on the site and the columns are left-aligned. What if this is not what you want? What if you want smaller columns? More than one? What if you want it center aligned? These are all options if you have the right custom CSS code…

And here it is for you! Saving you hours!!!

Here’s a step by step:

• Firstly we created some basic HTML containing parent div and 5 columns. Each column contains a box div inside.

<div class="container">
 <div class="row">
 <div class="column">
 <div class="box"></div>
 </div>
 <div class="column">
 <div class="box"></div>
 </div>
 <div class="column">
 <div class="box"></div>
 </div>
 <div class="column">
 <div class="box"></div>
 </div>
 <div class="column">
 <div class="box"></div>
 </div>
 </div>
</div>

• We add a background color and some padding to the page’s container div so we can see that illustrated better

.container { background-color: rgba(0,0,0,.05); padding: 200px 30px; }

• We set a width of 1000px to the row and center align it.

.row { width: 1000px; display: block; margin: 0 auto; text-align: center; }

• We’ve got 5 columns so we set the column width to 20% and give it some left and right padding. As already mentioned we use display: inline-block to align the columns in the row

.column { width: 20%; display: inline-block; padding: 0 15px; }

• Finally we give each box a background color and height.

.box { background-color: #000; height: 100px; }

• With these styles in place we’re almost done but with one problem still...

• The final column is dropping down to a second line for some reason. This is a known issue when using inline-block as a layout method (see https://css-tricks.com/fighting-the-space-between-inline-block-elements/ for a detailed breakdown of the problem). There are several solutions to the problem but the one we will use here is to apply font-size: 0 to the row column.
• With that final fix in place, we get the final result with the 5 boxes all correctly center aligned.

Look at that! You’ve got all five columns and they’re all center aligned. Who knows why the client actually needs this, but who cares! What matters most is that you’ve got a solution that took you 30 minutes instead of five hours messing around with CSS code.

Who knows what they’ll request next, but we’ll keep you posted on what we hear over in our neck of the woods!

Need help with Creative Strategy and Brand Development? Visit our Creative Strategy and Development page to learn how we can assist you.