ReasonNumber.com

Ruminations of a child-free couple living in a child-full world

Come back every Monday for a new comic

IE's Trouble With Inline Blocks And How To Center Floated Block Elements

Posted on 3/15/2012 at 6:17 am

If this is tl;dr then scroll to the bottom to see how to center a horizontal set of block elements.

I love styling the site for Chrome and FireFox. Develop for one, and the other practically comes for free. In fact, I believe I did no additional styling to ReasonNumber.com to have Firefox look close enough to how it looks in Chrome (which is my development browser of choice).

Enter Internet Explorer, and the world comes crashing down. When I finally got around to trying the site in IE, it was horribly broken. I started with IE 8, and the navigation buttons at the top would show up, but would not highlight when I moved my mouse over them, and would not let me click them. I spent an hour or so trying to figure that out, and then I checked out IE 7. The buttons were completely gone. This was AFTER IE 8 was working.

I figured out pretty early on that the problem was because I was styling my buttons with display: inline-block; I stubbornly believed I could get it to work though. Various sites claimed zoom this would work, or *display that would work, but nothing did it. Finally I gave up and switched to display: block; which I knew would at the very least show up in all browsers. Then the challenge was to get the buttons aligned how I wanted. It went surprisingly quick for the buttons along the top of the site. Buttons aligned vertically worked right away, but buttons aligned horizontally are a different matter.

My row of small buttons was quick to fix, as I just had to float them left and then add in the margins to get the look I wanted.

The really tricky part was the navigational buttons centered along the top and bottom of each comic and blog post. As it turns out, centering block level elements is not so trivial. Luck and Google were on my side and I found the solution.

The following css will allow you to center a set of block image links horizontally:

.centered-container {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
}

.centered-container .centered {
  float: left;
  left: 50%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.centered-container .centered .floated {
  float: left;
  position: relative;
  right:50%;
}

And then your html might look something like:

<div class="centered-container">
  <div class="centered">
    <a href="#" class="floated button">Button 1</a>
    <a href="#" class="floated button">Button 2</a>
    <a href="#" class="floated button">Button 3</a>
  </div>
</div>

I use Sass for my stylesheets (thanks to Rails for nudging me to try it out). I don't really like having classes that describe the styles I want to assign, I would rather describe the content and then style against that. Thus, I used a mixin to make it easy to center something:

@mixin float-center($container, $centered, $floated) {
  #{$container} {
    clear: both;
    float: left;
    overflow: hidden;
    width: 100%;

    #{$centered} {
      float: left;
      left: 50%;
      margin: 0 auto;
      padding: 0;
      position: relative;

      #{$floated} {
        float: left;
        position: relative;
        right:50%;
      }
    }
  }
}

@include float-center(".nav-container", ".nav", a);

The site finally worked the way I wanted it, and I could get back to drawing comics. That night I dreamt Microsoft announced it would base IE on webkit. It was a good dream.