CSS3 columns positioning issue

Question

I've been playing about with CSS3 columns and have come across a positioning issue. Firstly, check out my test on jsfiddle: http://jsfiddle.net/ahmednuaman/ybYtU/2/

In the div.cols is using CSS3 columns and the other isn't. You'll see as you hover over the links in the second div that the span for that link appear relative to it, however in the CSS3 column they appear where the link would be if there weren't columns.

Is this a standard bug? Is there a workaround?

Example Markup:

<div class="cols">
    Pork loin ball tip short ribs pork belly t-bone, short loin meatball kielbasa beef ribs tri-tip biltong beef ground round. Pork chop brisket jerky meatloaf. Strip steak short ribs tri-tip short loin pork loin. Turkey pastrami frankfurter, jerky hamburger short loin swine beef bacon chuck ham kielbasa biltong. Swine pork loin turkey hamburger filet mignon chuck, rump pig meatloaf bresaola prosciutto venison salami. Shoulder tongue short ribs, spare ribs salami filet mignon tri-tip tenderloin andouille capicola fatback pork chop sirloin. Ham leberkäse tri-tip, strip steak cow chuck ball tip fatback pork belly.

    Boudin bacon rump sausage pork belly, fatback sirloin kielbasa filet mignon. T-bone drumstick shoulder, filet mignon short ribs sausage pancetta cow kielbasa pig hamburger biltong meatball boudin beef. Meatball pig tri-tip hamburger, beef shankle brisket jerky pork loin rump turducken chuck. Fatback pork loin drumstick pork kielbasa, filet mignon prosciutto tri-tip sausage shoulder. Turkey biltong salami sirloin. Pork chop t-bone tri-tip, rump jerky corned beef tail. Ball tip fatback biltong pig, leberkäse frankfurter pork belly drumstick hamburger. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>

    Jerky chuck cow tri-tip. Jerky ham beef ribs, turducken short ribs meatball salami jowl shoulder sausage short loin. Meatball kielbasa pancetta sausage, jerky flank beef pork tri-tip ball tip prosciutto. Frankfurter beef capicola turkey. Swine short ribs kielbasa, ball tip fatback meatloaf chicken shank ham hock tenderloin beef ribs turkey shoulder tri-tip. Flank strip steak turducken, venison meatball fatback jerky frankfurter ribeye short loin turkey pancetta ham hock t-bone. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>
</div>

<div>

    Boudin bacon rump sausage pork belly, fatback sirloin kielbasa filet mignon. T-bone drumstick shoulder, filet mignon short ribs sausage pancetta cow kielbasa pig hamburger biltong meatball boudin beef. Meatball pig tri-tip hamburger, beef shankle brisket jerky pork loin rump turducken chuck. Fatback pork loin drumstick pork kielbasa, filet mignon prosciutto tri-tip sausage shoulder. Turkey biltong salami sirloin. Pork chop t-bone tri-tip, rump jerky corned beef tail. Ball tip fatback biltong pig, leberkäse frankfurter pork belly drumstick hamburger. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>

    Jerky chuck cow tri-tip. Jerky ham beef ribs, turducken short ribs meatball salami jowl shoulder sausage short loin. Meatball kielbasa pancetta sausage, jerky flank beef pork tri-tip ball tip prosciutto. Frankfurter beef capicola turkey. Swine short ribs kielbasa, ball tip fatback meatloaf chicken shank ham hock tenderloin beef ribs turkey shoulder tri-tip. Flank strip steak turducken, venison meatball fatback jerky frankfurter ribeye short loin turkey pancetta ham hock t-bone. Salami turkey jerky capicola. <a href="#">Salami turkey jerky capicola.<span>foooo</span></a>
</div>

Example CSS:

div
{
    position: relative;
    margin: 0 0 20px 0;
}
div.cols
{
    -moz-column-count:2;-moz-column-gap:20px;-webkit-column-count:2;-webkit-column-gap:20px;column-count:2;column-gap:20px;
}
a span
{
   position: absolute;
   display: block;
   visibility: hidden;
   background: red;
}
a:hover span
{
    visibility: visible;
}

Answer 1

The issue here is how you are using the 'display' and 'position' CSS attributes, not the columns.

Generally speaking, if you want to use position:absolute; as a way of floating something inline relative to its parent, you need to make the parent position:relative; to give the absolute positioned item a point of reference to calculate its position from. w3schools CSS positioning reference

So in your case with a span inside an anchor, you want the anchor link to be position:relative; and the span to be position:absolute; so that the span's co-ordinates are relative to the anchor tag (the top or bottom & left or right attributes).

One last 'gotcha' is anchors that have been wrapped. On my screen your long anchor text would sometimes wrap accross lines. So now the question becomes dependent on your specific use case. You could add white-space: nowrap; to the anchor CSS to prevent wrapping, or happily position your tooltip span relative to the whole wrapped anchor. That's just preference for your application.

So my solution to your problem is the following CSS:

/* Your original CSS */
div
{
    position: relative;
    margin: 0 0 20px 0;
}
div.cols
{
    -moz-column-count:2;-moz-column-gap:20px;-webkit-column-count:2;-webkit-column-gap:20px;column-count:2;column-gap:20px;
}

/* My updated CSS */
a {
    position: relative;
    /*white-space: nowrap;*/  //Optional
}
a span
{
    position:absolute;
    visibility: hidden;
    height:20px;top:-20px;
    right:0;
    z-index:100;
    background: red;
}
a:hover span
{
    visibility: visible;
}

Now you can adjust the top/right attributes for the span or replace them with bottom/left or whatever you need to get it in the position you want. Also for the sake of this example we've been using very simple CSS with the raw tag names, I'd recommend creating a link class for these special anchors so it doesn't apply to the whole page arbitrarily. Something like a.MyHoverLinkClass { ... }.

If you feel I've missed something from your problem please leave a comment to clarify your problem further so that I can address it.

UPDATE: If you use columns in Firefox, it implies paragraphs around the text. But both Chrome and Safari require that you add <p></p> in your columns to make this example work! This is why some developers said my example worked and others said it didn't. I have corrected the markup in my jsfiddle to include the <p></p> tags as it should have from the start! But remember to add them to your own work!