demosthenes.info

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.

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 with columns

css / layouts

Estimated reading time: 2 minutes, 46 seconds

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 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="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 specificiation. 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; you can find more information on the CodePen repo linked below.

    Photograph by Christopher Chan, licensed under Creative Commons. View the code for this example on CodePen

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.