Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

Get Aligned: Center Aligned Columns, That Is

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 & Development? We are here to help. 

 

Niall Gallagher
Senior Web Developer
If there is a new web app, I’ve tried it. If it’s integratable, optimizable, automatable, and customizable it is right up my alley. I manage and lead a team of developers that specialize in making a workable digital solution for your business out of nothing. I identify and make ongoing recommendations based on your business goals and the operational feasibility of what can be implemented to allow your business to scale and grow freely. Long story short, we’ll solve problems you didn’t know you had, in way you never thought possible.
close[x]

Get A Quote

Please fill out the quote form to the best of your knowledge. Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields