Photograph of a Buddhist monk in front of kabuki theatre, KyotoKyoto, located near the center of the island of Honshu, was Japan’s imperial capital for almost 1,000 years before the throne moved to Edo (today, Tokyo). The city continues to be Japan’s cultural centre, best known for its gardens, traditional architecture, and university. Historically, Kyoto was known as “The City of Ten Thousand Shrines”.

Today, Kyoto is home to 1.5 million people. It is also known as the home of the Nintendo game company, which has its headquarters in the city.

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.

As a result, many of Kyoto's preserved locations are UNESCO World Heritage Sites, including Kiyomizu-dera, a magnificent temple mounted on wooden pillars on the side of a mountain, and Ryōan-ji temple, famous for its rock garden. Tourism is a very important facet of Kyoto's income, especially the visitors drawn to the city by annual cultural events, many of which have been celebrated for more than a millennium. The other traditional industry in Kyoto is the production of sake.

Kyoto is located in Yamashiro valley, high in the Tamba mountain range. The city's geographical location results in humid summers and cold winters, with occassional snowfall.

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 responsive 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 theoretical 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?).

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="container">
	<div id="leftcol">
		<p><img src="kyoto-monk.jpg" 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.
	</div>
</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:

div#container {
	display: table;
	width: 80%;
	margin: 0 auto;
	max-width: 900px;
	line-height: 1.5;
}
div#container img {
	width: 55%;
	height: auto;
	margin-right: -20%;
	margin-left: 20px;
	float: right;
	margin-bottom: 20px;
}
div#leftcol, div#rightcol {
	display: table-cell;
	padding: 1em;
}
div#leftcol { width: 50%; }
div#rightcol { width: 40%; }

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: 25%;
	padding-top: 102%;
}

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

The one major disadvantage of this technique is that it cannot be used with CSS "newspaper style" columns, although the CSS Exclusions module will offer some solutions, once browsers support the specification. 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.

I’ve made this solution responsive, such that the text collapses into a single column when the viewport is narrow enough.

Photograph by Christopher Chan, licensed under Creative Commons.