float: center With Columns

float: 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>

   <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.

   </div>

   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.