Centering Widthless Floats

This week I had a problem with centering a widthless floated element with CSS. It seemed an obvious thing to want to do but I could think of no simple solution, align center 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 center 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 centered inside its parent container.

The premise here is a simple one, basically it involves a widthless 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 center. 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 centered 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 center (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 centered in this case a horizontal scrollbar will apear on the window at smaller screensizes. This can be solved by applying overflow:hidden; as in the above example.

This article was posted on 25/09/09 in Code, CSS, HTML

Save a massive 36% on a subscription to .net magazine!

We love .net magazine (known as "Practical Web Design" outside the UK) and have teamed up with Future Publishing to get our readers up to a massive 36% off a years subscription.

comments

add comment

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

Used this example to fix centering a menu that I was working on. 

Worked like a charm!

Thank you very much.

- Mike
x
Step 1. : Login details

about you.

Step 2. : Password

your say.

Step 3. : Email details

preferences.


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.