CSS3 Column Positioning Problem

Question

I played with CSS3 columns and ran into a positioning problem. First check out my jsfiddle test: http://jsfiddle.net/ahmednuaman/ybYtU/2/

div.cols uses CSS3 columns, and the other doesn't. You will see how you hover over the links in the second div , which indicates the span for that link relative to it, however in the CSS3 column they appear where the link would be if there were no columns.

Is this a standard error? Is there a workaround?

Layout Example:

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

CSS example:

 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 problem here is how you use CSS and display attributes, not columns.

Generally speaking, if you want to use position:absolute; as a way to move something in a row relative to your parent, you need to do a parent position:relative; To give an absolute positioned element a link to calculate its position from, w3schools CSS Positioning Link

So, in your case with a span inside the anchor, you want the anchor to be positional: relative; and the range that should be position: absolute; so that the coordinates of the range refer to the anchor tag (top or bottom and left or right attributes).

One last “gotcha” is the anchors that were wrapped. On my screen, your long anchor text sometimes ended in lines. So the question now depends on your specific use case. You can add white-space: nowrap; CSS binding to prevent wrapping, or happily position your tooltip on the whole anchor anchor. This is just a 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 set the top / right attributes for the range or replace them with the bottom / left or whatever you need to get it in the right place. In addition, for this example, we used very simple CSS with the names of raw tags, I would recommend creating a link class for these special anchors so that it does not extend to the entire page arbitrarily. Something like a.MyHoverLinkClass { ... } .

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

UPDATE: If you use columns in Firefox, this implies paragraphs around the text. But Chrome and Safari need to add <p></p> to their columns for this example to work! That's why some developers said that my example worked, while others said no. I fixed the markup in my jsfiddle to include <p></p> tags, as it should have been from the start! But do not forget to add them to your work!