I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

float: center With Columns

css / layouts

Estimated reading time: 2 minutes, 46 seconds

Float centre examplefloat: center does not actually exist, for reasons I will explain shortly. But it is possible to fake it. This is such a neat trick that I wish I had come up with it, but credit goes to Chris Coyier; what is shown here is merely my variation on his technique.

I’m often asked “if there’s float: left and right, why isn’t there a float: center ?” A few answers:

  1. text-align: center already covers most cases.

  2. text wrapped on both sides of an image makes lines in a paragraph extremely difficult to scan, unless the text is treated very carefully. Usually this means division of text into columns, which is a separate issue entirely.

  3. float should really be called wrap when it comes to text. float: left simply means “put this element on the left side of its container, and wrap everything that follows to its right”. In this context, our theoritical float: center would really be wrap: both, which brings up an entire suite of issues (how do you determine how “deep” the element is inside its container element?).

  4. To use this technique, we build a separate <div> for each column, and divide our text between them. In my variation, the image we want to use between the columns is placed in the start of the first <div>, and floated right.

    <div id="leftcol">
    <p><img src="kyoto-monk.jpg" style="width: 240px; height: 240px; float: right; margin-left: 20px;" alt="Photograph of a Buddhist monk in front of kabuki theatre, Kyoto">Kyoto, located on the island of Honshu, was once Japan’s imperial capital. The city is Japan’s cultural centre, best known for its gardens, traditional architecture, university, and the Nintendo game company, which has its headquarters in the city.
    <div id="rightcol">
    <p>Kyoto was largely spared from the physical destruction of WWII. It was removed from its place at the top of the target list for the atomic bomb by the intervention of the US Secretary of War Henry L. Stimson, who had honeymooned there. Photo by localJapanTimes.

    Then we give each <div> an equal width by setting each to display: table-cell:

    div#leftcol, div#rightcol { display: table-cell; padding: 1em; }

    So far, we have a fairly conventional layout: two column divs, with one holding a floated image. The trick lies in two parts: first, we displace the image by using a negative margin-right on it. This displacement is just over half the width of the image:

    <img src="kyoto-monk.jpg" style="width: 240px; height: 240px; margin-right: -150px; margin-left: 20px;" />

    The second part of the trick is to use generated content for the second <div> that is sized to slightly more than half the width and a little more then the full height of the image, to provide the impression of “margin” around it in the right <div>:

    div#rightcol:before { content: " "; float: left; width: 140px; height: 260px; }

    This pushes a placeholder into the second <div>, which the image can then occupy.

    The one major disadvantage of Chris’s technique is that it cannot be used with CSS3 "newspaper style" columns (at least not in any way I can determine, although I hold out hope that the CSS3 Fluid Box model or JavaScript addressing may offer some solutions). Another limitation is the fact that the image must be at the top of the <div>; you cannot, unfortunately, place the illustration in an arbitrary vertical location.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.