0

I have a strange problem when the container has overflow:hidden and the page has in URL an id. The content is moved on top and is not visible. This issue occurs when I add padding and negative margin on bottom. I've done this to have equal collumns.

Here is a demo. Click the link and you'll see how the content is moved on top and not vissible. http://jsfiddle.net/6etu9ywc/1/

How can I prevent this? A JS solution is acceptable, if using only CSS is not possible.

Andrei Surdu
  • 2,281
  • 3
  • 23
  • 32
  • 1
    Please add the relevant code on the question ... I don't see any issue on the fiddle just two box with links and nothing happens. Clarify your point. – DaniP Oct 27 '14 at 16:16
  • There is nothing wrong with your fiddle. All divs are visible. – azhpo Oct 27 '14 at 16:16
  • I wonder if you are seeing a browser specific issue? Fiddle looks OK to me, unless the desired result is incorrect. – lharby Oct 27 '14 at 16:17
  • Ohh, my bad. I've updated fiddle. Now if you click the link (id1 or id2), the content jump on top and all content before the id is not visible. – Andrei Surdu Oct 27 '14 at 16:57

1 Answers1

0

OK so I think based on your question you need to stop the normal behaviour associated with an anchor.

I've made an update to the fiddle http://jsfiddle.net/6etu9ywc/2/

I have referenced jquery, if I get time I will create a pure js solution.

This stops the page reloading on the normal click

code looks like this:

$(document).ready(function(){
   $('.column a').click(function(){
      return false;
   });
});

I assume this is what you are after, failing that of course you could have the links go to a reference on the same page, but the fiddle would need updating, depends on your requirements. Hope this helps.

lharby
  • 3,057
  • 5
  • 24
  • 56