Centring Width less Floats

This week I had a problem with centring a width less floated element with CSS. It seemed an obvious thing to want to do but I could think of no simple solution, align centre was not going to cut it here.

From looking around it is implied that you cannot centre floated elements, only “float” them left or right.  While this is technically true it is actually possible. In my case I had a horizontal menu of items in a that I wanted to be fluid in width and be in the centre of the page.

There is no problem if the floats have a width because you can then ascertain the main parents width and use margin:auto; to centre the whole block. This means however that the floats cannot be a fluid width (i.e. sized to match their content) or setting a fixed with for each element using individual classes, not an ideal situation.

The Solution

This is result we are trying to achieve; a horizontal menu with floated elements centred inside its parent container.

The premise here is a simple one, basically it involves a width less float that is placed 50% from the left using position:relative. The nested inner element is then reversed and a negative relative position of 50% (-50%) is applied. This has the effect of placing the element in the centre. Relative positioning maintains the flow and allows other content to flow underneath.

We start with the HTML code for our simple menu structure in a unordered list:

<div id="centeredfloat">
  <ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a></li>
    <li><a href="#">Item Four</a></li>
  </ul>
</div>

Then we add some CSS magic:

#centeredfloat {
  float: left;
  position: relative;
  left: 50%;
  text-align: left;
  }
#centeredfloat ul {
  list-style: none;
  position: relative;
  left: -50%;
  }
#centeredfloat li {
  float:left;
  position: relative;
  }
/* ie needs position:relative here*/
#centeredfloat a {
  text-decoration: none;
  float: left;
  text-align: center;
  white-space: nowrap;
  margin: 10px;
  padding: 5px 10px 5px 10px;
  background-color: #b9d2d3;
  }
body {
  overflow:hidden;
  }
/* hide horizontal scrollbar*/

The result is a horizontal menu centred inside its parent. This technique should work in most modern browsers and even in IE6. (It doesn’t work in IE5 Mac, but there is very little reason for anyone to be using that browser anymore.)

Limitations

In a fixed width scenario where the parent container has a fixed with this technique works very well. There is however an issue when the floats wrap at shorter screen-widths then the elements that has wrapped it. In this scenario it will not align to the centre (Try resizing this window and see what happens). Also worth noting is a horizontal scrollbar problem where the width of the centred floats are more than half the width of the the container that they are centred in this case a horizontal scrollbar will appear on the window at smaller screen sizes. This can be solved by applying overflow:hidden; as in the above example.

This article was posted on 25 September 2009 in Code, CSS, HTML

What you have had to say about all this...

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.