float: center

by

As a CSS enthusiast, one of the questions I have heard a lot over the past few years has been, “How do I float center?” To that, I have always replied simply, “you don’t,” and then I delve into what my colleague is actually trying to do. (Really, when was the last time you wanted content to flow around both sides of a block?)

Today my answer has changed.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

Alternatives

First off, let’s not use a cannon to kill a mosquito. If you need to center a single line of text (styling not withstanding), just set text-align: center on the containing block. If you really need to center a block, set its left and right margins to identical values. If your block has an explicit width, set the left and right margins to auto.

What if you do not have (or desire) explicit margins or an explicit width? What if you want several sibling blocks to have the same width? I’m glad you asked…

The simple, three-step process

Consider the following HTML fragment in this example.

<div class="rowWrapper">
	<div class="row">Here are three block-display elements.</div>
	<div class="row">There are no explicit widths set.</div>
	<div class="row">Siblings have the same effective width and are centered.</div>
</div> 

For the sake of the example, I’ll give the wrapper a red border and the rows a blue border.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

1. Float the wrapper

.rowWrapper {
	border: 1px solid red;
	float: left;
}

Wrap your blocks and float the wrapper. Because your blocks are in normal flow, they will each have the same width by expanding to fill their parent block. Because the parent block is floated, it will have the minimum width necessary to contain the child blocks. This results in the following:

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

2. Position the wrapper

.rowWrapper {
	border: 1px solid red;
	float: left;
	position: relative;
	left: 50%;
}

This centers the left edge of the wrapper, and thus your soon-to-be-centered, now equal-width blocks.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

3. Position the ‘rows’

.row {
	border: 1px solid blue;
	position: relative;
	left: -50%;
}

This puts the center of the equal-width blocks at the left edge of the wrapper.

Here are three block-display elements.
There are no explicit widths set.
Siblings have the same effective width and are centered.

Naturally, you’ll want to remove any visible signs of the wrapper.

Advertisements

Tags: , , ,

11 Responses to “float: center”

  1. Mark Morrison Says:

    Well written and very useful. Thanks Jon!

  2. Yuri Says:

    nice trick, already came in handy, ive seen the same idea applied to achieve internet explorer 6 min-width to be completely css.

  3. Bookmarks about Block Says:

    […] – bookmarked by 4 members originally found by faith4065 on 2008-09-20 float: center https://webmonkeyswithlaserbeams.wordpress.com/2008/07/09/float-center/ – bookmarked by 1 members […]

  4. Rich Says:

    Very nice, except that it causes a horizontal scrollbar to blank space. Looking to see if I can fix that, I’ll post back if I figure it out.

  5. Ben Says:

    This could probably work too. You can change the display to:

    display:inline-block;

    This display type will allow you to center the element with:

    text-align:center;

  6. Scott Says:

    I tried this and it worked great, but then the body of my main page was centered as well, any ideas??

    Scott

  7. jonwolski Says:

    That’s a great idea. It would seem that’s the whole reason for the existence of (CSS2 value) ‘inline-block,’ to use minimum-necessary width, without the mess of floating. We’re still supporting IE6 for daveramsey.com, based on our usage statistics, so we still need a CSS1-only solution.

  8. jonwolski Says:

    The style I used in the example centers everything in the body. This same trick could be used without centering the entire body. You need only set text-align: center on the parent of the rowWrapper.

  9. willy Says:

    Yeah you can use text-align.. but, what if I want to center the but the text-align still left..
    I think that’s a great tips, but still doesn’t fix the empty horizontal scroll bar. Hopefully someday margin and float can work together :))

  10. jonwolski Says:

    In rereading this, the solution for the horizontal scroll bars hit me. You could wrap the whole thing in yet one more div and set overflow: hidden on that outer wrapper.

  11. Jon Wolski Says:

    http://jsfiddle.net/mKeHB/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: