I know this question was asked at least once before and I have read the other answers. They helped me bypass this problem (there are at least two tricks for this), but what I am asking here is why do I have this problem in my particular setup.
My website is here: webpage
Scroll towards the bottom and you'll see a div (class "two_third") with tabbed content (it has gray background, you won't miss it). The titles of the three tabs are links (<a>
elements), but they're no longer clickable. The problem disappears when I remove "float:left" from the div that's immediately to the right (the one with the title "Package content", class "one_third").
What I suspect so far is that "one_third" overlaps with and adds some form of layer over "two-third", thus making links inside "two_third" become unclickable. But this is totally speculation and I have no idea why there would be any overlap, since there's enough space for the two divs to live side by side without any conflicts.
Kindly appreciate your suggestions
You have a DIV <div class="horizotal_break clearfix"></div>
. That is on top of the two_third
DIV. You can't select text from two_third
either. If you remove position:relative;
from #content .horizotal_break
it should be working fine.